Question

我在使用带有以下javascript代码的event.stopPropagation（）时遇到问题

<li onclick="test();">
  <div>
    <span onclick="test2();">click</span>
 </div> 
</li>

点击跨度时会打开一个带有一些内容的灯箱（jQuery颜色框），但问题是当我点击它首先调用<li> onclick时，我尝试了event.stopPropagation()但是它看起来不适合我，有人可以告诉我该怎么做吗？

Answer 1

问题是你没有使用jQuery绑定事件。

您需要使用jQuery绑定它们，以便能够访问包含适用于所有浏览器的此方法的正确扩展的Event对象。

Answer 2

试试这个http://jsfiddle.net/GratT/

$('li').click(function(){
   alert('li clicked');
});


$('span').click(function(e){
   alert('span clicked');
   e.stopPropagation();
});

Answer 3

您应始终将动态功能与内容分开。因此，正如每个其他用户将在此处告诉您的那样，将您的事件函数与您希望他们操作的html元素绑定。它并不难

       jQuery(document).ready(function($)
       {
         $("li").bind("click", text)
         $("span").bind("click", text2);

      });

Answer 4

现代浏览器中有两种事件捕获方法（“捕获”和“冒泡”）和泡泡，它取决于您使用的浏览器。我可能错了，但据我记得mozila式浏览器正在使用“捕获”方法，而IE正在使用“冒泡”。区别在于“捕获”方法启动从父级到子级的事件链，这意味着父事件将首先触发，子元素将最后触发（在您的情况下会发生这种情况）。你需要在这里将你的事件类型设置为Bubble。为此，您需要删除onclick属性并将其替换为：

<li id="lst">
  <div>
    <span id="spn">click</span>
 </div> 
</li>


var element1 = document.getElementById('lst');
var element2 = document.getElementById('spn');

element1.addEventListener('click',doSomething1,false);
element1.addEventListener('click',doSomething2,false);

其中doSomething1和doSomething1是函数指针; 你也可以使用jQuery事件绑定，它有自己的事件绑定函数，默认情况下它们设置为冒泡，但你可以关闭冒泡，它将使用捕获方法

这是一篇有用的文章

http://www.quirksmode.org/js/events_order.html

使用event.stopPropagation（）

4 个答案: