Question

我有以下HTML-Java代码：

<div id="div_id" style="cursor: pointer;">
  <a id="a_id" href="...">...</a>

  <script type="text/javascript">
    $('#a_id').click(function(event) {
      event.preventDefault();
      alert('...');
    });
  </script>
</div>

<div id="details_id" style="display: none;">
  Some text to be displayed!

  <script type="text/javascript">
    $('#div_id').click(function(event) {
      event.preventDefault();
      $('#details_id').toggle();
    });
  </script>
</div>

当我（在我的浏览器中）点击HTML div#div_id时，它会切换div#details_id。但是，当我点击HTML a#a_id时，也会发生切换。我想实现这种行为，这样当我点击HTML a#a_id时，它就不会切换div#details_id。

我该怎么做？

Answer 1

只是做：

$('#div_id').click(function(event) {
    if (event.target != $('#a_id')[0]) {
      event.preventDefault();
      $('#details_id').toggle();
    }
});

Answer 2

要阻止click事件触发两个处理程序，请停止a元素上的event bubbling：

event.preventDefault();
event.stopPropagation();

或者更简洁：

// Your code

return false;

演示：http://jsfiddle.net/jfzU2/2/

如何避免切换“嵌入式”HTML元素？

2 个答案: