Проблема привязки событий мыши - PullRequest
Новая
       8

Проблема привязки событий мыши

0 голосов
/ 02 сентября 2011

У меня есть таблица изображений. Каждая строка при наведении мыши показывает свое изображение в ранее скрытом элементе div, который был абсолютно позиционирован. При наведении указателя мыши на отображаемое изображение я хочу отменить привязку событий tr mouseleave, чтобы изображение не мерцало, а затем повторно связать события mouseleave, когда я покидаю div изображения.

Я могу отменить привязку события mouseleave, но повторное связывание вызывает мерцание. Соответствующий код: 

<table border="1" id="photoTable">
<tbody> 
    <tr class="item">
        <td class="filename">
            GraphDataCAQ3UW88.png
        </td>
    </tr>
    </tbody>
</table>
<div id="thisPhoto"></div>

CSS: 

#thisPhoto{
display:none;
position:absolute;
left:250px;
top:150px;
border: 1px solid black;
background-color:white;
padding:20px;
z-index:2;
}

JS: 

$(document).ready(function(){

(function($){
    $.fn.getThisPhoto = function(){
        return $(this).each(function(){
            //I've left out the code which gets the data to pass to $.get()
            $.get('administration/PhotoManagement/thisPhoto.cfm',
                data,
                function(response){
                    $('#thisPhoto').html(response).show();
                }
            );
        });
    };
})(jQuery);

   $('tr.item').hover(function(){       
    $(this).getThisPhoto();
},
function(){
    $('#thisPhoto').hide();
});

$('#thisPhoto').mouseenter(function(){
    $('tr.item').unbind('mouseleave');
}).mouseleave(function(){
    $('tr.item').bind('mouseleave', function(){
        $('#thisPhoto').hide();
    });
});

});

РЕДАКТИРОВАТЬ: я взломал его, обернув весь shebang в div и установив mouseout для этого div для запуска функций hide () и bind () ... не совсем то, что я хотел, но это будет сделано в крайнем случае .

Ответы [ 2 ]

1 голос
/ 02 сентября 2011

Вам не нужно связывать и откреплять событие, вам нужно использовать другой шаблон проектирования.

Взгляните на эту скрипку: http://jsfiddle.net/Diodeus/gHa4u/1/

1 голос
/ 02 сентября 2011

Я не уверен, подойдет ли эта модель для ваших требований, но рассмотрите возможность превращения div#thisPhoto в отдельные div s внутри вашего tr.Таким образом, пока вы находитесь над изображением, вы все еще находитесь над строкой таблицы.Например, разметка будет выглядеть примерно так: 

<tr>
    <td>
        <div class="thePhoto">
            <img src="http://www.mysite.com/images/Image001.jpg" />
        </div>
        Image001.jpg
    </td>
</tr>
<tr>
    <td>
        <div class="thePhoto">
            <img src="http://www.mysite.com/images/Image002.jpg" />
        </div>
        Image002.jpg
    </td>
</tr>

Если вы зададите стиль div.thePhoto a position: relative, вы можете затем задать стиль div.thePhoto > img a position: absolute и расположить его относительноверхний левый угол ячейки таблицы.Таким образом, вы только привязываете событие .hover() к каждой строке таблицы с .find("div.thePhoto") и отображаете или скрываете его дочерний элемент img.

См. эту скрипку для примера.

...