javascript - 目标元素点击子元素，获取父属性

Question

我有这个代码:

$('p', 'div.playlist').click(function(e){
  if (e.target != this) {
    val = $(this).parent().attr('songid');
  } else {
    val = $(this).attr('songid');
  }
  alert(val);
})

对应于此:

<div class="playlist">
  <p songid="1">Song Name<span class="small"> by Artist Name</span>
  </p>
</div>

我的问题是，当我单击带有艺术家姓名的范围时，它不会返回我传递给 swf 播放器以更改歌曲的 Songid 属性，这使其默认为播放列表中的第一首歌曲，但是当我单击段落标记的其余部分，它工作正常!

Answer 1

$('p', 'div.playlist').click(function(e){
  var val = $(this).attr('songid');
  alert(val);
})

由于您要绑定(bind)到 P 元素，因此您不需要检查哪个元素是 this...它始终是 p 元素。您的代码试图确定用户是否点击了 SPAN 元素或 P 元素，而上面的代码只是让点击冒泡到 P code> 元素并在那里处理它。

这是一个演示:http://jsfiddle.net/PAZTs/

如果您想禁止点击 SPAN 元素，则可以在这些元素的事件处理程序中使用 event.stopPropagation():

$('span', 'div.playlist').click(function(e){
    e.stopPropagation();
});

这是一个演示:http://jsfiddle.net/PAZTs/1/

还有一个旁注:在您的 click 事件处理程序中，您声明 val var，而不使用 var 关键字 (var val;) 将 val 变量放入全局空间，这是不必要的。