运行孩子的Onclick但不是父母的通过参数的地方

时间:2016-06-30 19:05:03

标签: javascript jquery html onclick

给定一些简单的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而不是父项,但是当点击父项时,它和&#39} #39; s onclick仍在执行?我看到event.stopPropagation()将是正确的方法,但由于我将一个参数传递给函数thing2(),我似乎也无法传递该事件。例如:

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

无效,失败并显示错误TypeError: ev is undefined

JQuery很好。

2 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

当您在单击时调用函数时,不会将任何事件作为参数传递,并且它可以以某种方式执行此操作,这不是Jquery对象,并且不具有stopPropagation属性。所以你需要为两个div定义jQuery click事件处理程序,让它们给它们{ids div1div2

HTML

<div id="div1" style='background-color:blue;width:500px;height:500px;'>
  <div id="div2" style='background-color:red;width:100px;height:100px;'></div>
</div>

在Javascript中,

function thing2(ev) {
  // Do something with a
  console.log(ev);
  alert('hi2');
  ev.stopPropagation();
}

function thing1(ev) {
  // Do something with a
  alert('hi1');
}

$('#div1').click(thing1);

$('#div2').click(thing2);