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

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>

当（在我的浏览器中）我单击 HTMLdiv#div_id时，它会切换div#details_id. 但是，当我单击 HTML 时也会发生切换a#a_id。我想实现该行为，以便当我单击 HTMLa#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.preventDefault();
event.stopPropagation();

或更简洁地说：

// Your code

return false;

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