2010-03-17 43 views
6

Câu hỏi javascript chung ở đây, cũng sẽ là điều tốt để biết làm thế nào (nếu có thể) để làm trong jquery.Có thể kích hoạt sự kiện nhấp chuột khi di chuột không?

Bạn có thể kích hoạt sự kiện nhấp chuột khi di chuột qua một mục không?

Tôi biết sẽ có người hỏi tại sao, nhưng hãy làm hài lòng tôi.

Rất cám ơn, C

+0

Nếu bạn biết mọi người sẽ hỏi, về việc giải thích? – Quentin

Trả lời

11

Hãy nhìn vào các trigger chức năng:

$(someElement).trigger('click'); 
+0

Tuyệt vời. Đã có một wee viết lên ở đây cho bất cứ ai quan tâm ... http: //blog.clintonbeattie.com/monitor-hovered-items-in-google-analytics/ –

4

Chỉ cần sử dụng click()

$(selector).click(); 

Hoặc cách khác chỉ di chuyển mã click() của bạn ra vào một chức năng phổ biến và gọi từ hover().

4

Rất đơn giản:

$(selector).mouseenter(function() { $(this).click() }); 
0
$('#selector').bind('mouseover',function(){ 

/*DO WHAT YOU WANT HERE*/ 


}); 

rằng nên làm các trick

0

jQuery có thể kích hoạt tiếng 'click' tất cả các đối tượng ngoại trừ thẻ một

hãy thử mã này trên console và xem những gì xảy ra trên trang này

$('a').bind('mouseover', function(){ 
    $(this).trigger('click'); 
    console.log('hover'); // let me know when it hovering <a> 
}); 
2
$('myselector').hover(function(){ 
    $(this).trigger('click'); 
}); 

CHỈNH SỬA: cách sau bài đăng nhưng chỉ để minh họa cách thêm cả trình xử lý và kích hoạt trình xử lý đó.

$('myselector').on('click',function(){ 
    // handle click event, put money in my bank account 
}).on('mouseenter',function(){ 
    $(this).trigger('click'); // only on enter here 
    // handle hover mouse enter of hover event, put money in my bank account 
}).on('mouseleave',function(){ 
    // handle mouse leave event of hover, put money in my bank account 
}).trigger('click'); 

Chỉ cần một lần?

$('myselector').on('click',function(){ 
    // handle click event, put money in my bank account 
}).one('mouseenter',function(){ 
    $(this).trigger('click'); // only on enter here once 
    // handle hover mouse enter of hover event, put money in my bank account 
}).on('mouseenter',function(){ 
    // handle hover mouse enter of hover event, put money in my bank account 
}).on('mouseleave',function(){ 
    // handle mouse leave event of hover, put money in my bank account 
}); 
0

Có thể kích hoạt sự kiện nhấp chuột khi di chuột.

Hãy thử ví dụ sau:

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>hover + (mouseup/mousedown, click) demo</title> 
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
</head> 
<body> 

<p class="up">Press mouse and release here.</p> 
<p class="hover1">Press mouse and release here. HOVER+UP/DOWN</p> 
<p class="hover2">Press mouse and release here. HOVER.UP/DOWN</p> 
<p class="hover3">Press mouse and release here. HOVER.CLICK</p> 

<script> 
$("p.up") 
    .mouseup(function() { 
    $(this).append("<span style='color:#f00;'>Mouse up.</span>"); 
    }) 
    .mousedown(function() { 
    $(this).append("<span style='color:#00f;'>Mouse down.</span>"); 
    }); 
$("p.hover1") 
    .hover(
    function() { 
     $(this).append("<span style='color:#f00;'>Hover IN.</span>"); 
    }, 
    function() { 
     $(this).append("<span style='color:#00f;'>Homer OUT.</span>"); 
    }) 
    .mouseup(function() { 
    $(this).append("<span style='color:#f00;'>Mouse up.</span>"); 
    }) 
    .mousedown(function() { 
    $(this).append("<span style='color:#00f;'>Mouse down.</span>"); 
    }); 
$("p.hover2") 
    .hover(
    function() { 
     $(this).append("<span style='color:#f00;'>Hover IN.</span>"); 
    }, 
    function() { 
     $(this).append("<span style='color:#00f;'>Homer OUT.</span>"); 
    }); 
$("p.hover2") 
    .mouseup(function() { 
    $(this).append("<span style='color:#f00;'>Mouse up.</span>"); 
    }) 
    .mousedown(function() { 
    $(this).append("<span style='color:#00f;'>Mouse down.</span>"); 
    }); 
$("p.hover3") 
    .hover(
    function() { 
     $(this).append("<span style='color:#f00;'>Hover IN.</span>"); 
    }, 
    function() { 
     $(this).append("<span style='color:#00f;'>Homer OUT.</span>"); 
    }); 
$("p.hover3") 
    .click(function() { 
    $(this).append("<span style='color:#00f;'>CLICK.</span>"); 
    }); 
</script> 

</body> 
</html> 
0

Bạn có thể muốn cũng để thêm một sự chậm trễ trên di chuột để nó sẽ không ngay lập tức kích hoạt. Sự chậm trễ sẽ hữu ích nếu bạn định sử dụng nó trong danh sách các hình thu nhỏ.

var hoverTimer; 
var hoverDelay = 200; 

$('.classSelector').hover(function() { 
    var $target = $(this); 
    // on mouse in, start a timeout 
    hoverTimer = setTimeout(function() {   
     // do your stuff here 
     $target.trigger('click');   
    }, hoverDelay); 
}, function() { 
    // on mouse out, cancel the timer 
    clearTimeout(hoverTimer); 

}); 
Các vấn đề liên quan