作者kerash (烽火連天依山盡)
看板Ajax
標題[問題] onclick 在 tr 上
時間Wed Feb 22 13:58:37 2012
[[[ 參考資料 :
http://www.aichengxu.com/article/Javascript/627_7.html ]]]
我想做一個 onclick 的功能
是在 tr 上，會如下
<table>
<tr onclick="do_event(xxx)">
<td><input type="checkbox" name="chkcal" /></td>
<td><input type="text" name="inpcal[]" /></td>
<td><input type="text" name="inpcal[]" /></td>
..
</tr>
</table>
但是遇到一個狀況就是當我在 tr 點選時，正常的執行 js
然而在 input 上 click 卻也會跟著執行 do_event 的動作
我的 do_event 是要用在處理 checkbox 的 checked 動作
所以這樣的話會變成我在 checkbox 點選就會自動取消QQ
有甚麼方法能夠在空白地方點擊才會觸發 do_event 事件嗎？
感恩QQ..
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 114.34.30.6
1F：→ nenpow:最簡單應該是在input裡 onClick="return false;" 吧 02/22 14:01
2F：→ kerash:使用過了，無效QQ 02/22 14:12
3F：推 LaPass:剛剛一開始也這樣想，結果點下去會把checkbox給勾選給撤銷 02/22 14:18
4F：→ Canboo:這個問題就我看來，這INPUT本來也就屬於TR，所以應該是要 02/22 14:19
5F：→ LaPass:javascript是怎麼阻止事件上溯的過程啊.... orz 02/22 14:19
6F：→ kerash:我找到的一個參考是用 cancelBubble 之類的東西 02/22 14:21
7F：推 LaPass:要不要試著用 onblur (失去焦點) 去觸發檢查？ 02/22 14:21
8F：→ kerash:但是我個人還沒測試Orz 02/22 14:21
9F：→ kerash:to LaPass: 怎麼使用? 02/22 14:22
10F：推 LaPass:跟onClick一樣啊，只是把他放在checkbox上或是input上 02/22 14:24
11F：→ LaPass:你在input上加個onblur="javascript:alert('onblur')"自己 02/22 14:26
12F：→ LaPass:點點看，就知道觸發時機了 02/22 14:26
13F：→ Canboo:從別的方式把INPUT加上去讓他不要在TRTD內，不然就是不應該 02/22 14:26
14F：→ Canboo:有INPUT在TR內 02/22 14:26
15F：→ Canboo:本身我是覺得這個需求有點奇怪，是什麼功能或需求要這樣子 02/22 14:27
16F：→ kerash:LaPass: 如果用 onblur 那在這之前還是會有 onclick 事件先 02/22 14:28
17F：→ kerash:觸發，這樣看的流程上就有一點點問題了 02/22 14:28
18F：→ kerash:Canboo: 可以參考yahoo/gmail 信箱的樣子，但是他們主要是 02/22 14:31
19F：→ kerash:點選中間會是瀏覽信件(用的大量ajax吧..) 02/22 14:31
20F：→ kerash:但在觸發某些空白處是勾選的效果 02/22 14:31
21F：→ kerash:我主要只是把中間改成 input 放在裡面，因為有文字要修改 02/22 14:32
用編輯的好了：
畫面看起來會像是
┌──┬─┬────────────┐
│ 口 │1 │[text:xxxxxxxxxxxxxx] │
├──┼─┼────────────┤
│....│ │ .................. │
點選非 input 的部分會觸發 onclick 把 checkbox 勾選或取消
但 input text 是要給使用者輸入的部分 ...
大概就是這樣
※ 編輯: kerash 來自: 114.34.30.6 (02/22 14:34)
22F：推 LaPass:瞭解你的意思了.... 02/22 14:35
23F：→ LaPass:等答案ing 02/22 14:37
24F：→ nenpow:onclick="javascript:event.stopPropagation();" 02/22 14:37
25F：→ nenpow:放input 02/22 14:39
26F：→ kerash:樓上方法 chrome 有效，FF未測，ie無效，我再找找通用 02/22 14:41
27F：→ kerash:這個方法是我上面說的取消 bubble 的方法之一..先感謝>< 02/22 14:41
28F：→ bibo9901:onclick="event.cancelBubble=true;" 02/22 14:43
29F：→ nenpow:推樓上 ie 有自己的 02/22 14:47
以下是目前在網路上找跟在這邊組合的解答
function stopevt(e)
{
if( typeof(e)=="undefined"&&typeof(window.event)!="undefined") e =
window.event;
e.cancelBubble = true;
if (e.stopPropagation) {
e.stopPropagation();
}
}
但是在 FF 還是無效...Orz
※ 編輯: kerash 來自: 114.34.30.6 (02/22 14:49)
30F：→ bibo9901:但 FF 跟 GC 現在也兼容了 02/22 14:49
31F：→ emn178:判斷觸發event的element是input類型就return掉 02/22 14:59
32F：→ kerash:樓上，這樣不行，因為tr在外面他一定先觸發到tr.. 02/22 15:00
33F：→ kerash:我剛剛測完 firefox 了，知道問題在哪了! 02/22 15:01
FIREFOX 測試結果，利用以下方法測
function mozchk()
{
alert("ohoh");
stopevt();
alert("oh2");
}
發現這樣測試，可以成功阻止 oh2 的alert
因此如果按照原本的狀況
function inpchk()
{
alert("what!");
stopevt();
}
<table>
<tr onclick="mozchk()">
<td><input type="text" onclick="inpchk()"></td>
</tr>
</table>
會是先讀取到 mozchk 才處理 inpchk 導致沒辦法阻止
而其他的 browser 則是先處理了 inpchk 才進行 mozchk
所以 mozchk 就被停住了 ...
大概是這樣，看來要用個 global flag 了...
※ 編輯: kerash 來自: 114.34.30.6 (02/22 15:05)
34F：→ nenpow:原po有用framework嗎? 02/22 15:15
35F：→ kerash:no , 單一頁面 02/22 15:18
※ 編輯: kerash 來自: 114.34.30.6 (02/22 15:21)
36F：推 LaPass:推 02/22 15:26
37F：→ TonyQ:firefox 會動啊，你是不是忘了參數要塞 event 02/22 17:23
39F：→ TonyQ:純 JS 寫起來很繁瑣的 而且 inline JS 很難維護 02/22 17:24
40F：→ TonyQ:firefox 的重點在 "onClick="evt_cb(event)" << 注意 event 02/22 17:25
41F：→ kerash:謝Tony大，我在測試看看，因為我目前還習慣這種寫法Orz 02/22 21:36
42F：→ kerash:裡面有些我本身也有帶參數，所以還不確定怎麼跑 02/22 21:36
43F：→ kerash:我當時測確實沒加event,所以不知道會怎樣@@ 02/22 21:37
44F：→ TonyQ:沒塞event你拿不到e ，就不會stop 02/23 00:37