0

私はこのHTMLを持っています：

<html>
<head>
<title>Mouseenter and Click combined</title>
</head>
<body>
<a id="linkselector" href="#">Click here</a>
</body>
</html>

これは私のjQueryコードです：

jQuery( document ).ready( function($) {

//This is the click event
$('#linkselector').live('click',(function() {        

alert('You are clicked!');


}));

//This is the mouseover event
$('#linkselector').live('mouseenter', (function(evt){

    $('<div class="popupx"></div>').appendTo(document.body);
    $('.popupx').html('<img src="http://' + $(this).data('id') + '.jpg.to/">');
    $('.popupx').css({left: evt.pageX+30, top: evt.pageY-15}).show();
    $('.popupx').css('border','0');        

    $(this).live('mouseleave', (function(){
        $('.popupx').hide();
    }));
}));

});

そして最後に私のCSS：

.popupx{
position:absolute;
width:30px;
height:30px;
}
.popupx img{
width:30px;
height:30px;
}

リンクにカーソルを合わせると、画像が正しく表示されるため、機能します。問題は、それをクリックしても、クリックイベントがトリガーされなくなることです。ただし、mouseenter/hoverメカニズムを削除すると。クリックイベントは正常に機能します。

ユーザーがリンクの上にマウスを置いたときにクリックイベントを発生させるにはどうすればよいですか？おそらく、コードで重要な何かを見逃しています。ヒントをありがとう。

更新：3つのイベントを1つの関数に正常に結合しましたが、何らかの理由でONが機能しないため、引き続きLIVEとIF/elseを使用しています。とにかく、私は以下のロジックでmouseenterとmouseleaveが正しく機能しています。ただし、mouseenterがアクティブになっている場合でも、クリックは機能しません。おそらく、ホバーまたはmouseenterイベントがまだ表示されているときにクリックイベントが発生する方法を見つける必要があります。

    $('#linkselector').live('click mouseleave mouseenter',(function(evt) {  

    if (evt.type === 'click') {
//This is a click event
    //This won't fire when the mouseenter or hover is shown

} else if (evt.type === 'mouseenter') { 

            //This is working nicely

        $('<div class="popupx"></div>').appendTo(document.body);
        $('.popupx').html('<img src="/image.png">');
        $('.popupx').css({left: evt.pageX-60, top: evt.pageY-60}).show();
        $('.popupx').css('border','0');

} else if (evt.type === 'mouseleave') {

         //This is also working nicely

        $('.popupx').remove();      

    }

}));
4

3 に答える 3

1

on()jQueryで要素を使用および作成して、より最新のアプローチを試してください。

$(function() {
    $(document).on({
        click: function() {        
            alert('You are clicked!');
        },
        mouseenter: function(evt){
            $('<div />', {
                'class' : 'popupx',
                   html : '<img src="http://' + $(this).data('id') + '.jpg.to/">',
                  style : 'left: '+(evt.pageX+30)+'px; top: '+(evt.pageY-15)+'px; border: 0; display: block'
            }).appendTo($('body'));
        },
        mouseleave: function(){
            $('.popupx').remove();
        }
    }, '#linkselector');
});​

フィドル

live()は非推奨であり、を使用する必要がありますon()。また、コードから、リンクがホバーされるたびに新しい要素が作成され、マウスが離れると非表示になり、削除されないことも明らかです。したがって、リンクがホバーされるたびに、要素が1つ作成されます。それらを削除します。おそらく。に置き換える必要がhide()ありremove()ます。

于 2012-12-20T06:01:52.780 に答える
0

コードはjQuery1.7.2とfirefox17で正常に機能します。jQueryのバージョンとブラウザは何ですか。

ここにコードをコピーして貼り付けます：jsfiddle.net/62Y64/

于 2012-12-20T06:05:19.920 に答える
-1

それらを同時にバインドしてから、それがどのイベントであるかを確認します。

$('#linkselector').live('mouseenter click', (function(evt) {
    if (evt.type === 'click') {
        alert('You are clicked!');
    } else {
        $('<div class="popupx"></div>').appendTo(document.body);
        $('.popupx').html('<img src="http://' + $(this).data('id') + '.jpg.to/">');
        $('.popupx').css({
            left: evt.pageX + 30,
            top: evt.pageY - 15
        }).show();
        $('.popupx').css('border', '0');

        $(this).live('mouseleave', (function() {
            $('.popupx').hide();
        }));
    }
}));
于 2012-12-20T05:57:55.790 に答える