Question

我有类似以下的内容：

 <div onclick="divClickEvent();">
   <img onmousedown="imgOnDownEvent();" />
 </div>

问题在于，如果你在img上按下鼠标，那么div会在鼠标上方点击。我尝试通过向img元素添加onclick="return false;"来覆盖div onclick，但div onclick仍在触发。我还有一个取消气泡并在文件onmouseup事件中返回false（它在img ondown事件中动态附加）。

我已经没想完了。为什么div仍在处理事件，我该如何阻止它？

Answer 1

cancelBubble已弃用。

在图片的onclick事件中使用event.stopPropagation()代替cancelBubble [非标准方法]。

阻止当前事件的进一步传播。

Answer 2

考虑使用像jQuery这样的抽象框架，无论浏览器版本如何，都可以使用相同的方法停止传播：

<div id="image_holder">
     <img id="some_image" alt="" src="" />
</div>

<script type="text/javascript">
     $(document).ready(function(){ // This will be run when DOM is ready
          var holder = $('#image_holder'),
              someImage = $('#some_image');

          someImage.bind('mousedown', function(event){ 
              // This will be run on mousedown
              event.preventDefault().stopPropagation();
          });
     });
</script>

嵌套元素的鼠标事件问题

2 个答案: