结合悬停和点击功能(jQuery)?

3zz*_*zzy 39 javascript jquery function click hover

可以将悬停和点击功能合并为一个,例如:

点击:

$('#target').click(function() {
  // common operation
});
Run Code Online (Sandbox Code Playgroud)

徘徊:

$('#target').hover(function () {
    // common operation
});
Run Code Online (Sandbox Code Playgroud)

它们可以组合成一个功能吗?

谢谢!

Emi*_*nov 93

使用基本的编程组合物:创建一个方法,并传递相同的功能clickhover作为回调.

var hoverOrClick = function () {
    // do something common
}
$('#target').click(hoverOrClick).hover(hoverOrClick);
Run Code Online (Sandbox Code Playgroud)

第二种方式:使用:bindon

$('#target').on('click mouseover', function () {
    // Do something for both
});
Run Code Online (Sandbox Code Playgroud)
jQuery('#target').bind('click mouseover', function () {
    // Do something for both
});
Run Code Online (Sandbox Code Playgroud)

  • 现在建议使用jquery"on"函数而不是使用bind.但它的工作方式相同,只需将"bind"替换为"on"即可. (2认同)

小智 28

使用鼠标悬停而不是悬停.

$('#target').on('click mouseover', function () {
    // Do something for both
});
Run Code Online (Sandbox Code Playgroud)


Nic*_*ver 9

您可以使用.bind().live()以适当的方式,但不需要命名该功能:

$('#target').bind('click hover', function () {
 // common operation
});
Run Code Online (Sandbox Code Playgroud)

或者如果你在很多元素上做这个(除非元素改变,否则对IE没有多大意义):

$('#target').live('click hover', function () {
 // common operation
});
Run Code Online (Sandbox Code Playgroud)

注意,这只会绑定第一个悬停参数,mouseover事件,它不会挂钩任何mouseleave事件.


小智 8

$("#target").hover(function(){
  $(this).click();
}).click(function(){
  //common function
});
Run Code Online (Sandbox Code Playgroud)