以下為本站文章分類清單

  1. AJAXspacer
  2. ASPspacer
  3. CSSspacer
  4. Javascriptspacer
  5. Windows 應用程式spacer
  6. 網頁設計
  7. 評論、短文、雜文spacer
  8. 版主spacer
  9. 最新回應spacer

以下為本頁本文內容

CSS Gradient避免子物件的 onclick 事件同時引發父物件事件

3/18 12' icon

Photo by http://www.squidoo.com

情況是

<div onclick="alert('A');">文字<a href="javascript://"" onclick="alert('B');">超連結</a></div>

當按下"超連結"字樣時,會跳出 A 還是 B?

文字超連結

實作的結果是:按"超連結"時,會跳出 B 然後跳出 A,而按下"文字"時,則只跳出 A。現在的問題是:按"超連結"字樣時,如何只跳出 B,而不跳出 A。

先談解決方法

javascript 部份
function amIclicked(e,elm){
	e=e||event;
	var targ=e.target||e.srcElement;

	if(targ.id==elm.id)
		return true;
	else
		return false;
}

function oneClick(evt,elm){
	if(amIclicked(evt,elm)){
		alert('One is clicked');
	}
}

function twoClick(evt,elm){
	if(amIclicked(evt,elm)){
		alert('Two is clicked');
	}
}
HTML 部份
<style>
#one{
	width: 200px;
	height: 300px;
	background-color: red;
}

#two{
	width: 50px;
	height: 70px;
	background-color: yellow;
	margin-left: 10;
	margin-top: 20;
}

</style>

<div id="one" onclick="oneClick(event, this);">
	one
	<div id="two" onclick="twoClick(event, this);">
		two
	</div>
</div>

為了讓讀者識別,有些變數名稱,我改掉,原文出處請按這裡

e.target / event.srcElement

Javascript 有 Event 物件,簡單講,就是事件控制,然而,另有個"藏鏡人"隨時在監看用者動作,這個物件名稱叫作 e,在 IE 中則叫作 event。

e 物件能作些什麼呢?比如說,使用者現在滑鼠移到那裡去了、比如說,使用者現在正在操作畫面上那個項目等。

以上例而言,當使用者按下"超連結"字樣時,瀏覽器監看的結果,發現被點選的物件是 <a...>超連結</a>,而按下"文字"時,則被點選的物件則是 <div>...</div>

舉個例子來說,"有人拍了湯姆一下",和"有人拍了湯姆的頭一下",這兩個情況都是"拍(onclick)",但,在觀察者眼中,這兩種情況的"部位(物件)"則有明顯不同。

這個觀察者角色,以物件型式存在,名稱就叫作 e,在 IE 中則叫作 event。至於觀察到正在作用中的物件則是 e.target,在 IE 中為 event.srcElement。再來看一次測試語法,這次加上顏色以供區別

<div onclick="alert('A');">文字<a href="javascript://"" onclick="alert('B');">超連結</a></div>

把紅色物件 onclick 事件的設計,加入兩個參數,例如 onclick="myFun(event,this);" 把 event 事件物件當作參數傳遞,再把 this (本身) 也當作物件傳遞。

所以,當使用者按下紅色部份的文字,e.target 相當於整串紅色物件,但不包括藍色文字部份,所以當 this 和 e.target 相同時,就能確定只是按在紅色部份。

所以,上例程式部份,實作時,有幾個地方可以修改,首是,紅色部份的 onclick 可以不變動,因為要避免的是按在紅色部份時,一併觸動藍色部份,所以,在處理藍色部份的 onclick ,加入判別,判定監看到的 e.target 是不是和使用者按下去的物件相同。

其次,在行 5 判斷使用 e.target.id 則可以簡化成 e.target 即可。

補充:3/18 12'

有網友告知,依 W3C 提供的資訊,使用 stopPropagation() 是較妥善的方法,這裡有詳細說明。 http://www.quirksmode.org/js/events_order.html

 

以下為文章回應區

同意轉載,不過麻煩看一下轉載需知

domain name registrar   2017/11/20 下午 11:21:00

Hello there! This post couldn't be written any
better! Reading through this post reminds me of my good old room mate!
He always kept chatting about this. I will forward this write-up to him.
Pretty sure he will have a good read. Many thanks for sharing!

Nelson   2017/11/17 上午 08:48:00

At this time it appears like Movable Type is the best blogging platform
available right now. (from what I've read) Is that what you are using on your blog?

home security cameras best buy   2017/11/16 下午 01:53:00

In order to safeguard your loved ones from deterioration?

Timothy   2017/11/11 上午 08:53:00

Hey, I think your blog might be having browser compatibility issues.
When I look at your website in Ie, it looks fine but when opening in Internet
Explorer, it has some overlapping. I just wanted to give
you a quick heads up! Other then that, wonderful blog!

Lelio Vieira Carneiro Junior   2017/11/10 上午 11:16:00

Howdy I am so glad I found your web site, I really found you by
accident, while I was looking on Askjeeve for something else, Regardless I am
here now and would just like to say many thanks for a marvelous
post and a all round entertaining blog (I also love
the theme/design), I don’t have time to read it
all at the minute but I have book-marked it and also added in your RSS feeds, so when I have time I will be
back to read more, Please do keep up the excellent jo.

boorishruin3695.exteen.com   2017/8/12 上午 08:09:00

You ought to be a part of a contest for one of the finest
websites on the net. I am going to recommend this website!

How do you treat Achilles tendonitis?   2017/8/4 下午 02:13:00

I don't even know how I ended up here, but I thought this post was
good. I do not know who you are but definitely you're going
to a famous blogger if you aren't already ;) Cheers!

Why is my Achilles tendon burning?   2017/7/31 上午 11:01:00

I got this web site from my buddy who shared with me concerning this website and now this time I
am visiting this site and reading very informative posts at
this time.

isarondeau.jimdo.com   2017/7/31 上午 02:01:00

Hey would you mind stating which blog platform you're
using? I'm going to start my own blog in the near future but I'm having
a tough time deciding between BlogEngine/Wordpress/B2evolution and Drupal.
The reason I ask is because your layout seems different then most blogs and I'm looking for something completely unique.
P.S Sorry for getting off-topic but I had to ask!

How long do you grow during puberty?   2017/7/28 上午 10:38:00

I do not even know how I ended up here, but I assumed this post was great.
I do not understand who you are however certainly you're going to a well-known blogger when you aren't already.
Cheers!

woke up with a foot pain   2017/7/4 上午 07:00:00

These are genuinely impressive ideas in on the topic of blogging.
You have touched some pleasant points here. Any way keep up wrinting.

foot pain cycling   2017/7/4 上午 01:49:00

For the reason that the admin of this web site is working, no question very soon it
will be famous, due to its feature contents.

   2017/6/12 下午 02:09:00

Does your website have a contact page? I'm having a tough time locating it
but, I'd like to shoot you an e-mail. I've got some recommendations
for your blog you might be interested in hearing. Either way,
great site and I look forward to seeing it expand over time.

manicure   2017/5/4 上午 04:15:00

Thank you for the auspicious writeup. It
in fact was a amusement account it. Look advanced
to far added agreeable from you! By the way, how could we
communicate?

manicure   2017/4/11 下午 06:40:00

I'm curious to find out what blog platform you're using? I'm experiencing some small security problems with my latest blog
and I would like to find something more secure. Do you have any suggestions?

給個回應
姓名:
佈落格網址:
  如果您是要發問問題, 最好有個問題測試的網址, 這樣比較容易找到您問題所在, 謝謝
內容: