作者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