Как мне эмулировать событие mouseenter, используя живую функциональность jquery? - PullRequest
Новая
       11

Как мне эмулировать событие mouseenter, используя живую функциональность jquery?

0 голосов
/ 21 мая 2009

Я хочу использовать отличную живую функциональность jQuery для события mouseenter, но в настоящее время оно не поддерживается. Ниже мое первое решение, но оно не кажется оптимальным. Предложения? Улучшения? 

// mouseenter emulation
jQuery('.selector').live('mouseover',function (e) {
    // live sees all mouseover events within the selector
    // only concerned about events where the selector is the target
    if (this != e.target) return; 
    // examine relatedTarget's parents to see if target is a parent. 
    // if target is a parent, we're "leaving" not entering
    var entering = true;
    jQuery(e.relatedTarget).parents().each(function () {
            if (this == e.target) {
                entering = false;
                return false; // found; stop searching
            }
    });
    if (!entering) return;
    /*
     the rest of my code 
     */
});

Я не могу проверить дочерние объекты цели для relatedTarget b / c. Нет простого способа получить все дочерние узлы. Я не могу напрямую проверить, имеют ли родители цели relatedTarget как родителя и, таким образом, «вводят» цель, b / c для наведения мыши, это может быть вход от соседнего брата, а не родителя.

Это решение работает нормально. Я проверил это, и это кажется хорошим, но как я мог улучшить это? Это также страдает от того, как устроен DOM. Некоторая часть элементов селектора должна быть открыта, чтобы увидеть событие mouseover, но это редко бывает проблемой в примерах, на которых я это примеряю. Тем не менее, если есть способ гарантировать, что это будет видно, это было бы неплохо.

Наверное, я хочу знать, правильно ли я подхожу к этому, а если нет, то что лучше?

Ответы [ 3 ]

1 голос
/ 05 декабря 2010

Я закончил тем, что сделал: 

$("#id").delegate(".selector", "mouseover", function(){
 if(!$(this).hasClass("bound")){                            
  $(this).hover(function(){
   alert('entering');
  },
  function(){
   alert('leaving');
  }).mouseover().addClass("bound");
 }
});
0 голосов
/ 22 октября 2009

Просто столкнулся с чем-то похожим. Здесь было мое решение

HTML: 

<div class="dropdown">
  <span>Options</span>
  <ul class="options">
    <li class="cart"><a href="http://amiestreet.com/saves/save/song/WGylTQo-A4Qx" rel="ui-lightbox"><span class="cart_drop">Add to cart</span></a></li>
    <li class="add-to-playlist"><a href="/playlist/create/add-song/WGylTQo-A4Qx" rel="ui-lightbox">Add to playlist</a>
        <ul class="playlists" style="display:none;">
            <li><a href="/playlist/create/add-song/WGylTQo-A4Qx" rel="ui-lightbox">Create New Playlist</a></li>
            <li class="add-song-to-playlist"><a href="/playlist/MD6Cp1F7Y24x/addSong/WGylTQo-A4Qx" rel="WGylTQo-A4Qx">Free Tracks (Copy)</a></li>
        </ul>
    </li>
    <li><a href="http://amiestreet.com/music/wiley/treddin-on-thin-ice/the-game">More info</a></li>
  </ul>
</div>

JS 

<script type="text/javascript">
  $(function(){
    $('.dropdown').live('mouseover', function(){
        $('.dropdown > .options:visible').hide();
        $(this).find('.options').show();
    });
    $('.dropdown').live('mouseout', function(e){
        if(!$(e.relatedTarget).is('ul.options') && $(e.relatedTarget).parents('ul.options').length==0){
            $(this).find('.options').hide();
        }
    });
  });
</script>
0 голосов
/ 21 июня 2009

Прошло довольно много времени, и я не думаю, что нет ничего лучше.

Я использую это в паре проектов сейчас, поэтому я возьму это из кучи вопросов без ответа.

Надеюсь, что другие найдут это полезным, и если вы найдете ошибку или предложите что-нибудь получше, дайте мне знать.

...