onMouseOver/onMouseOut 在子元素上触发

Question

这是我的基本代码：

<script type="text/javascript">

function play(id){
    $("#player"+id).jPlayer("play", 0);
    $("#jp-play"+id).css("background-color", "#999999");
    $("#jp-pause"+id).css("background-color", "#999999");
    $("#jp-play"+id).css("background-image", "url(images/voice_over/hover.png)");
    $("#jp-pause"+id).css("background-image", "url(images/voice_over/hover.png)");
}

function end(id){
    $("#player"+id).jPlayer("stop");
    $("#jp-play"+id).css("background-color", "#656565");
    $("#jp-pause"+id).css("background-color", "#656565");
    $("#jp-play"+id).css("background-image", "url(images/voice_over/normal.png)");
    $("#jp-pause"+id).css("background-image", "url(images/voice_over/normal.png)");
}
</script>


<div class="jp-audio" onMouseOver="play(\''.$id.'\');" onMouseOut="end(\''.$id.'\');">
    //child elements, id from PHP
</div>

当 div 悬停在上面时播放音频。 有几个 div（每个 div 播放不同的音频）。

但是将鼠标悬停在每个 div 中的子元素（如文本）上将会停止音频。

我知道这与冒泡/传播有关。 我正在使用 jQuery，只是尝试添加 event.stopPropagtion();到功能，但它不起作用。

其他解决方案需要使用 .hover() 等。 那么我如何获得要播放的文件的 id 呢？

我希望这是有道理的。 我发现很难解释我的意思。

任何帮助将不胜感激。

现在我的工作代码是：

var play = function() {
    var id = $(this).attr('file-id');
    $("#player"+id).jPlayer("play", 0);
    $("#jp-play"+id).css("background-color", "#999999");
    $("#jp-pause"+id).css("background-color", "#999999");
    $("#jp-play"+id).css("background-image", "url(images/voice_over/hover.png)");
    $("#jp-pause"+id).css("background-image", "url(images/voice_over/hover.png)");
}

var end = function() {
    var id = $(this).attr('file-id');
    $("#player"+id).jPlayer("stop");
    $("#jp-play"+id).css("background-color", "#656565");
    $("#jp-pause"+id).css("background-color", "#656565");
    $("#jp-play"+id).css("background-image", "url(images/voice_over/normal.png)");
    $("#jp-pause"+id).css("background-image", "url(images/voice_over/normal.png)");
}

$(document).ready(function(){
   $('.jp-audio').hover(play, end);        
});

<div class="jp-audio" file-id="'.$id.'">stuff</div>

在 .hover 之前添加变量非常重要，特别是当根据用户输入动态加载内容时。
我用另一种方式解决了这个问题，当使用innerHTML时它不起作用。

Answer 1

更好的方法是将 $id 设置为 html 元素的 attr

$(document).ready(function(){
   $('.js-audio').hover(play, end);        
});

var play = function() {
   var id = $(this).attr('file-id');
   ....
}

<div class="js-audio" file-id="$id"></div>