js函数中 如何阻止事件冒泡
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js函数中 如何阻止事件冒泡相关的知识，希望对你有一定的参考价值。
html中 <input id="text1" type="text" onclick="F_Bind_ZhongLeiClick(this)" />
script中 该怎样阻止事件冒泡啊
function F_Bind_ZhongLeiClick(ele)
//jquery代码
//
不想使用这种绑定方法
$("#text1").bind("click",function(e)
);
首先：你不想使用的方法恰恰是推荐的最好的方法，为什么不用推荐的方法呢。
如果实在想用第一种，onclick="F_Bind_ZhongLeiClick(this)"
修改为
设计目标：单击input时，显示一个div，同时给body添加一个单击事件，如果单击了body，就隐藏这个div，如何实现哈？
追答为简化其间，假设你页面引入了jquery
$(document).on('click', function(e)var el = $(e.target);
if( el.attr('id') === 'text1' )//text1就是你的input的id
//显示你的div的操作
$('your div').show();
else
//隐藏你的div的操作
$('your div').hide();
) 参考技术A function stopBubble(e)
17. // 如果传入了事件对象，那么就是非ie浏览器
18. if(e&&e.stopPropagation)
19. //因此它支持W3C的stopPropagation()方法
20. e.stopPropagation();
21. else
22. //否则我们使用ie的方法来取消事件冒泡
23. window.event.cancelBubble = true;
24.
25.
26.追问
onclick="F_Bind_ZhongLeiClick(this)" 这种方式时，F_Bind_ZhongLeiClick中怎么阻止事件冒泡？
参考技术B ？？说详细一点啊，是光标事件，还是cofirm用光标事件就可以解决了， $("#input").focus(function () $("#div").show(); );
， $("#input").blurs(function () $("#div").hide(); );
记得采纳我的答案啊 参考技术C // 第一种
// html 加return false
//<input id="text1" type="text" onclick="F_Bind_ZhongLeiClick(this);return false;" />
// 第二种，结合html和js一起
// 函数调用前加return，这样函数里可以控制要不要阻止
// <input id="text1" type="text" onclick="return F_Bind_ZhongLeiClick(this);" />
// js中return false是阻止，return true是不阻止
function F_Bind_ZhongLeiClick(ele)
return false;
本回答被提问者采纳
HTML如何阻止事件冒泡?求源码分析
HTML如何阻止事件冒泡?求源码分析
原以为span不同于input，事件冒泡会被父级标签吞噬，写了个测试事件冒泡的Demo，发现并不是想得那样。另外：event.stopPropagation()以及event.stopImmediatePropagation()并不能阻止span冒泡到a标签中，而简单粗暴的return false却可以。
1<!DOCTYPE html>2 <html>
3 <head>
4 <title>Bubbling</title>
5 <style type="text/css">
6 *
7 font-size:30px;
8
9 div
10 border: 1px blue solid;
11
12 span
13 border: 1px blue solid;
14
15 </style>
16 <script type="text/javascript">
17 function setforeColor(sender)
18 sender.style.color = "red";
19
20
21 function setbgColor(sender)
22 sender.style.background = "green";
23 return false;
24
25 </script>
26 </head>
27 <body>
28 <div>
29 <span onclick="setforeColor(this)">span tag</span> in div
30 </div>
31 <br>
32 <div>
33 <input type="button" value="Button" onclick="setforeColor(this)"/> in div
34 </div>
35 <br>
36 <a href="https://www.baidu.com" style="text-decoration:none;display:block;">
37 <span onclick="setforeColor(this);return false">span tag</span> in anchor
38 </a>
39 <br>
40 <a href="https://www.baidu.com" style="text-decoration:none;display:block;">
41 <span onclick="setbgColor(this)">span tag</span> in anchor
42 </a>
43 </body>
44 </html> 参考技术A document.onclick=funciton(e)
e = e || window.event;
if(e.target == oGohove)
oGotohove.style.display = 'block';
else
oGotohove.style.display = 'none';
以上是关于js函数中 如何阻止事件冒泡的主要内容，如果未能解决你的问题，请参考以下文章