onMouseOver / onMouseOut срабатывает на дочерних элементах - PullRequest
Новая
       20

onMouseOver / onMouseOut срабатывает на дочерних элементах

0 голосов
/ 22 августа 2011

Это мой основной код: 

<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-файле (например, текст) остановит звук.

Я понимаю, что это как-то связанобарботирование / распространение.Я использую jQuery и просто попытался добавить event.stopPropagtion ();к функциям, но это не сработало.

Другие решения требуют использования .hover () и т. д. Но тогда как мне получить идентификатор файла для воспроизведения?

Я надеюсь, что это делаетсмысл.Мне трудно объяснить, что я имею в виду.

Любая помощь будет признательна.

Теперь мой рабочий код: 

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 это не сработало.

1 Ответ

2 голосов
/ 22 августа 2011

Лучший способ сделать это - установить $ id как атрибут элемента html 

$(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>
...