Javascript 目标元素单击子元素，获取父属性

我有以下代码：

$('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属性，这使其默认为播放列表上的第一首歌曲，但是当我单击段落标记的其余部分时，它工作正常

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

由于您要绑定到

p

元素，因此不需要检查哪个元素是

this

。。。它始终是

p

元素。您的代码试图确定用户是单击

SPAN

元素还是单击

P

元素，而上面的代码只是让单击冒泡到

P

元素并在那里处理它

下面是一个演示：

如果要禁止单击

SPAN

元素，则可以在这些元素的事件处理程序中使用

event.stopPropagation（）

：

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

下面是一个演示：

另一个旁注是：在

单击

事件处理程序中，您声明

val

变量，而不使用

var

关键字（

var-val；

），该关键字将

val

变量放在全局空间中，这是不必要的

由于您要绑定到

p

元素，因此不需要检查哪个元素是

this

。。。它始终是

p

元素。您的代码试图确定用户是单击

SPAN

元素还是单击

P

元素，而上面的代码只是让单击冒泡到

P

元素并在那里处理它

下面是一个演示：

如果要禁止单击

SPAN

元素，则可以在这些元素的事件处理程序中使用

event.stopPropagation（）

：

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

下面是一个演示：

---

还有一个旁注：在

单击事件处理程序中，您可以声明
val
var，而不使用
var
关键字（
var-val；
），该关键字将
val
变量放在全局空间中，这是不必要的。
您可以像下面这样使用“最近的”：

$('p', 'div.playlist').click(function(){
    alert($(this).closest('p').attr('songid')); 
});

您可以使用“最近的”，如下所示：

$('p', 'div.playlist').click(function(){
    alert($(this).closest('p').attr('songid')); 
});

注意，我使用的是
on（）
和
data（）
。在HTML中不能有自定义属性，除非它们前面有
data-
。这是在HTML5中添加的

此代码将使用class
playlist将click处理程序附加到任何
div
中的
p
元素。处理程序获取父div并获取其
数据songid
值

注意，我使用的是
on（）
和
data（）
。在HTML中不能有自定义属性，除非它们前面有
data-
。这是在HTML5中添加的

此代码将使用class
playlist将click处理程序附加到任何
div
中的
p
元素。处理程序获取父div并获取其
数据songid
值。
播放列表？这当然是UL元素的工作！所以UL代替DIV，LI代替P。（经验法则是：当你有多个元素是兄弟元素并且有共同的行为/意义时，你就想使用UL。）我同意。我甚至不知道我为什么用P，只是注意力不集中！播放列表？这当然是UL元素的工作！所以UL代替DIV，LI代替P。（经验法则是：当你有多个元素是兄弟元素并且有共同的行为/意义时，你就想使用UL。）我同意。我甚至不知道我为什么用P，只是注意力不集中！我的原始代码是最上面的，问题是当用户单击p中的span时，它没有返回songid属性。我现在觉得自己很愚蠢。这是我的动作脚本中的一个问题，如果位置与轨迹长度相同，它会推进轨迹。当然，在歌曲加载之前，位置和长度是相同的，所以它会自动前进！现在改变了。给了你正确的答案，因为。。。好。。。是的。我的原始代码是最上面的一个，问题是当用户单击p中的span时，它没有返回songid属性。我现在觉得很愚蠢。这是我的动作脚本中的一个问题，如果位置与轨迹长度相同，它会推进轨迹。当然，在歌曲加载之前，位置和长度是相同的，所以它会自动前进！现在改变了。给了你正确的答案，因为。。。好。。。它是。