jquery鼠标经过事件

jQuery是一个快速、简洁的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax交互等操作,在jQuery中,鼠标事件是非常重要的一部分,它们可以帮助我们实现丰富的交互效果,本文将详细介绍jQuery中的鼠标事件及其用法。

jquery鼠标经过事件

1、点击事件(click)

点击事件是最常见的鼠标事件之一,当用户点击鼠标时触发,在jQuery中,可以使用.click()方法来绑定点击事件。

$("#btn").click(function() {
  alert("按钮被点击");
});

2、双击事件(dblclick)

双击事件是指用户在短时间内连续点击鼠标两次,在jQuery中,可以使用.dblclick()方法来绑定双击事件。

$("#div").dblclick(function() {
  alert("元素被双击");
});

3、鼠标按下事件(mousedown)

鼠标按下事件是指用户按下鼠标按钮时触发,在jQuery中,可以使用.mousedown()方法来绑定鼠标按下事件。

$("#btn").mousedown(function() {
  alert("鼠标按下");
});

4、鼠标松开事件(mouseup)

鼠标松开事件是指用户松开鼠标按钮时触发,在jQuery中,可以使用.mouseup()方法来绑定鼠标松开事件。

$("#btn").mouseup(function() {
  alert("鼠标松开");
});

5、鼠标移动事件(mousemove)

鼠标移动事件是指用户移动鼠标时触发,在jQuery中,可以使用.mousemove()方法来绑定鼠标移动事件。

$("#div").mousemove(function(event) {
  $(this).css("background-color", "red");
});

6、鼠标进入事件(mouseenter)

鼠标进入事件是指鼠标指针进入指定元素时触发,在jQuery中,可以使用.mouseenter()方法来绑定鼠标进入事件。

$("#div1").mouseenter(function() {
  $("#div2").show();
});

7、鼠标离开事件(mouseleave)

鼠标离开事件是指鼠标指针离开指定元素时触发,在jQuery中,可以使用.mouseleave()方法来绑定鼠标离开事件。

$("#div1").mouseleave(function() {
  $("#div2").hide();
});

8、鼠标悬停事件(hover)

鼠标悬停事件是 mouseenter 和 mouseleave 事件的结合,当鼠标指针进入或离开指定元素时触发,在jQuery中,可以使用.hover()方法来绑定鼠标悬停事件。

$("#div1").hover(function() {
  $("#div2").show();
}, function() {
  $("#div2").hide();
});

9、滚动事件(scroll)

滚动事件是指用户滚动页面时触发,在jQuery中,可以使用.scroll()方法来绑定滚动事件。

$(window).scroll(function() {
  if ($(this).scrollTop() > 100) {
    $("#btn").fadeIn();
  } else {
    $("#btn").fadeOut();
  }
});

10、拖拽事件(drag)和放下事件(drop)

拖拽事件是指用户按下鼠标并移动元素时触发,放下事件是指用户松开鼠标按钮时触发,在jQuery中,可以使用.draggable()方法来实现元素的拖拽功能,然后使用.dragstart().dragover().dragenter().dragleave().drop().dragend()方法来处理拖拽过程中的事件。

<button id="btn">拖拽我</button>
<div id="div" style="width: 100px; height: 100px; background-color: red;"></div>
<script>
  var isDragging = false; // 用于判断是否正在拖拽元素的标志位
  var startX, startY; // 记录拖拽开始时的坐标位置
  var $div = $("#div"); // 获取目标元素对象
  $div.draggable({ // 设置元素可拖拽属性,同时绑定 dragstart、drag、dragend 事件处理函数
    start: function(event, ui) { // dragstart 事件的处理函数,记录拖拽开始时的坐标位置和状态标志位为 true,并阻止默认行为和冒泡行为,返回 false 表示取消拖拽操作的默认行为和冒泡行为,返回 true 表示允许拖拽操作的默认行为和冒泡行为继续执行下去,注意:这里需要先阻止默认行为和冒泡行为,否则无法触发后续的 drag、dragend 事件处理函数,如果直接返回 true,则不会触发后续的事件处理函数,需要在此处先阻止默认行为和冒泡行为,然后再返回 true,由于 dragstart、drag、dragend 事件的触发顺序是固定的,因此不需要担心其他事件的干扰问题,需要注意的是,这里的 event、ui 参数都是系统自动传入的参数,event 参数表示当前发生的事件对象,ui 参数表示当前拖拽操作的一些信息对象,如坐标位置等,具体可以参考官方文档:https://api.jqueryui.com/draggable/#event-start。
内容声明:本文中引用的各种信息及资料(包括但不限于文字、数据、图表及超链接等)均来源于该信息及资料的相关主体(包括但不限于公司、媒体、协会等机构》的官方网站或公开发表的信息,内容仅供参考使用!本站为非盈利性质站点,本着免费分享原则,发布内容不收取任何费用也不接任何广告! 【若侵害到您的利益,请联系我们删除处理。投诉邮箱:i77i88@88.com】

本文链接:http://7707.net/jquery/20231231828.html

发表评论

评论列表

还没有评论,快来说点什么吧~