Question

我有这个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;
}

当我悬停链接时，图像会正确显示，因此其工作正常。问题是当我点击它时，它不再触发click事件。但是，如果我删除了mouseenter / hover机制。点击事件工作正常。

当用户将鼠标悬停在链接上时，如何触发点击事件？可能我错过了我的代码中的重要内容。感谢您的任何提示。

UPDATE ：我已成功将三个事件合并到一个函数中，但我仍然使用LIVE和IF / else，因为出于某种原因，ON将无法正常工作。无论如何，我在下面的逻辑中正确地使用了mouseenter和mouseleave。但是，当激活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();      

    }

}));

Answer 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');
});

FIDDLE

不推荐使用

live()，您应该使用on()。从代码中可以清楚地看出，每次链接悬停时，都会创建一个新元素，然后当鼠标离开时它被隐藏，而不是被删除，所以你创建了一堆元素，每次链接悬停时都没有，没有删除它们。您应该将hide()替换为remove()。

Answer 2

您的代码在jQuery 1.7.2＆amp;火狐17。什么是你的jQuery版本＆amp;浏览器？

我复制＆amp;将代码粘贴到此处： jsfiddle.net/62Y64 /

Answer 3

同时绑定它们，然后检查它是哪个事件。

$('#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();
        }));
    }
}));

在悬停或鼠标中心期间，单击不起作用

3 个答案: