以下為本站文章分類清單

  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

 

以下為文章回應區

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

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?

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