jq之鼠标事件

这篇具有很好参考价值的文章主要介绍了jq之鼠标事件。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

以防自己忘记,最重要的是hover效果的

鼠标事件是在用户移动鼠标光标或者使用任意鼠标键点击时触发的。

(1):click事件:click事件于用户在元素敲击鼠标左键,并在相同元素上松开左键时触发。

$('p').click(function(){

alert('click function is running !');

});文章来源地址https://www.toymoban.com/news/detail-499372.html

(2):dbclick事件:dbclick事件在用户完成迅速连续的两次点击之后触发,双击的速度取决于操作系统的设置。一般双击事件在页面中不经常使用。

$('p').dbclick(function(){

alert('dbclick function is running !');

});

(3):mousedown事件:mousedown事件在用户敲击鼠标键时触发,跟keydown事件不一样,该事件仅在按下鼠标时触发。

$('p').mousedown(function(){

alert('mousedown function is running !');

});

(4):mouseup事件:mouseup事件在用户松开鼠标时触发,如果在与按下鼠标的元素相同元素上松开,那么click事件也会触发。

$('p').mouseup(function(){

alert('mouseup function is running !');

}).click(function(){

alert('click function is running too !');

});

(5):mouseover事件:mouseover事件于用户把鼠标从一个元素移动到另外一个元素上时触发,如果需要知道来自那个元素可以使用,relatedTagrget属性。

(6):mouseout事件:mouseout事件于用户把鼠标移出一个元素时触发,这包括从父元素移动到子元素上,或者使用键盘跳到元素上。

(5)和(6)这两个事件一般不常用,很难实现与用户的交互,也就是说不易捕获用户事件。

(7):mouseenter事件:mouseenter事件是在用户光标进入元素上时触发。

$('p').mouseenter(function(){

alert('mouseenter function is running !');

});

(8):mouseleaver事件:mouseleaver事件是在用户的光标离开元素时触发。

$('p').mouseleaver(function(){

alert('mouseleaver function is running !');

});

(7)和(8)这两个事件一般连起来使用,在jQuery中可以使用hover这个函数来代替这两个函数。

$('p').hover(function(){

alert('mouseenter function is running !');

},function(){

alert('mouseleaver function is running !');

});

到了这里,关于jq之鼠标事件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包