jQuery鼠标事件
来源:互联网 发布:淘宝站外推广有用吗 编辑:程序博客网 时间:2024/06/18 04:07
鼠标事件是DOM事件中最常用的事件,jQuery对鼠标事件进行了封装和扩展。鼠标事件是在用户移动鼠标光标或者使用任意鼠标键点击时触发的。
click 当用户按下并释放鼠标按键或其他方式“激活”元素时触发dblclick 当用户双击鼠标时触发mousedown 当用户按下鼠标按键时触发mouseup 当用户释放鼠标按键时触发mouseover 当鼠标进入元素时触发mouseout 当鼠标离开元素时触发mouseenter 类似mouseover,但不冒泡mouseleave 类似mouseout,但不冒泡
(1):click事件:click事件于用户在元素敲击鼠标左键,并在相同元素上松开左键时触发。
$('p').click(function() { alert('click function is running !');});
(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 !');});
示例分析:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="./jquery-3.2.1.min.js"></script> <script src="./script.js"></script> <style> * { margin: 0; padding: 0; } #dTest { background-color: gray; width: 300px; height: 150px; } button { float: left; background-color: yellow; width: 120px; height: 60px; margin: 30px 100px; } </style></head><body> <div id="dTest"> <button>Button</button> </div></body></html>
JS代码如下
var eventHandle = function(evt) { console.log(evt.type);}$(document).ready(function() { $('#dTest').on('mouseenter', eventHandle); $('#dTest').on('mouseover', eventHandle); $('#dTest').on('mousedown', eventHandle); $('#dTest').on('mouseup', eventHandle); $('#dTest').on('click', eventHandle); $('#dTest').on('dblclick', eventHandle); $('#dTest').on('mouseout', eventHandle); $('#dTest').on('mouseleave', eventHandle);})
阅读全文
0 0
- jQuery事件鼠标事件
- jQuery事件-鼠标事件
- JQuery中的鼠标事件
- jquery鼠标滑动事件
- jQuery 鼠标事件
- jquery鼠标事件
- jquery 常见鼠标事件
- jQuery鼠标滚动事件
- jquery 鼠标滚轮事件
- Jquery ---鼠标事件toggle
- JQuery鼠标滚轮事件
- jquery鼠标事件
- jQuery鼠标事件汇总
- jQuery鼠标事件
- jQuery鼠标事件
- jQuery鼠标事件汇总
- jQuery鼠标事件
- jQuery鼠标事件汇总
- 浅谈c++中的while(cin)问题
- ERP项目笔记2
- 编译安装 MYSQL
- 这款插件可让iOS设备的音量HUD更加好用
- HDU 4971 A simple brute force problem.(最小割,最大权闭合图)
- jQuery鼠标事件
- ajax实现文件上传
- Jump Game
- 敏捷核心价值观_这是我明天公司要背的~~~
- mysql求2个时间的时间差,mysql求绝对值
- Maven多模块Jetty插件运行
- Spring5:@Autowired注解、@Resource注解和@Service注解
- laravel request 类里 get方法和input的方法的区别?
- HDU6168 Numbers(模拟,2017 HDU多校联赛 第9场)