javascript - 在传递参数的地方运行子级的 Onclick 但不运行父级的 Onclick

Question

给定一些简单的 HTML，例如，其中一个元素具有 onclick 函数，并且它的子元素也具有 onclick 函数:

<div style='background-color:blue;width:500px;height:500px;'
    onclick='thing1();'>
    <div style='background-color:red;width:100px;height:100px;'
        onclick='thing2(57);'></div>
</div>

正确的方法是什么，以便当用户单击子元素时，仅执行子元素的 onclick 而不是父元素的，但当单击父元素时，则执行 onclick 仍然执行吗？我认为 event.stopPropagation() 是正确的方法，但由于我将参数传递给函数 thing2()，我似乎无法也通过该事件。例如:

function thing2(a,ev) {
    // Do something with a
    ev.stopPropagation();
    }

不起作用，失败并出现错误TypeError: ev is undefined。

JQuery 没问题。

Answer 1

事件是第一个参数。

function thing2(ev) {
  var a = ev.target
  ev.stopPropagation()
}

其次，最好不要使用onclick=。相反，给你的 div 类或 id 并执行如下操作:

<div class="thing-1" data-thingy="57">
  <div class="thing-2" data-thingy="65"></div>
</div>

<script>
  $('.thing-1').click(function (ev) {
    ev.stopPropagation()
    parseInt($(ev.target).data('thingy'), 10) // 57
  })

  $('.thing-2').click(function (ev) {
    ev.stopPropagation()
    parseInt($(ev.target).data('thingy'), 10) // 65
  })
</script>