jQuery 如何判断鼠标是否在 div 上? 下面本篇文章给大家介绍一下使用 jQuery 判断鼠标是否在 div 上的方法. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
方法 1: 用 $.contains 来判断
$.contains 是 jQuery 里用来判断一个标签是否包含另一个标签的方法.
- //$.contains 的语法结构为:
- $.contains(容器, 要判断的标签元素);
要注意的,$.contains 的两个参数必须为 dom 对象, 不能是 jQuery 对象!
来看用 $.contains 来判断鼠标是否处于 div 之内的具体代码:
- if($.contains($("#aijquery")[0],e.target) || $("#aijquery")[0]==e.target){
- $(".info").text("鼠标在这个 DIV 里");
- }else{
- $(".info").text("鼠标不在这个 DIV 里");
- }
上面实例里,#aijquery 就是要判断的 DIV,e.target 是鼠标触发的节点.
要判断鼠标是否位于 div#aijquery 之内, 先 $.contains 来判断, 鼠标所触发的节点是否被包含在 div#aijquery 内, 然后再判断鼠标触发的节点是否就是当前的 div#aijquery 节点, 这两种情况下, 鼠标都处在 div 之内.
方法 2: 使用 mouseover 和 mouseout 来判断
当鼠标指针位于元素上方时, 会发生 mouseover 事件, 当鼠标指针从元素上移开时, 发生 mouseout 事件.
PS: 和 mouseenter/mouseleave 事件不同, 不论鼠标指针进入 / 离开被选元素还是任何子元素, 都会触发 mouseover/mouseout 事件. 只有在鼠标指针进入 / 离开被选元素时, 才会触发 mouseenter/mouseleave 事件.
- $("#aijquery").mouseover(function(){
- $(".primary").text("方法二: 鼠标在这个 DIV 里");
- }).mouseout(function(){
- $(".primary").text("方法二: 鼠标不在这个 DIV 里");
- });
缺点: 在页面初始化时, 也就是刚打开页面时, 是判断不出来的, 只有把鼠标移上 div 上一次, 激活了 mouseover 事件后, 才能判断, 具体可以看上面给的那个在线实例演示.
方法 3: 最传统的方法, 也就是通过 X,Y 坐标来判断
- var x=e.clientX;
- var y=e.clientY;
- var div_x_1 = $("#aijquery").offset().left;
- var div_y_1 = $("#aijquery").offset().top;
- var div_x_2 = $("#aijquery").offset().left+$("#aijquery").outerWidth();
- var div_y_2 = $("#aijquery").offset().top+$("#aijquery").outerHeight();
- if( x <div_x_1 || x> div_x_2 || y <div_y_1 || y> div_y_2){
- $(".danger").text("方法三: 鼠标不在这个 DIV 里");
- }else{
- $(".danger").text("方法三: 鼠标在这个 DIV 里");
- }
综合示例:
- <!doctype html>
- <HTML>
- <head>
- <script language="JavaScript" src="//cdn.bootCSS.com/jquery/1.9.1/jquery.min.js">
- </script>
- <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
- </head>
- <body class="text-center p-5">
- <DIV class="border border-danger p-5">
- <Div id="aijquery" class="border border-dark p-3 alert-success">
- <span class="info border border-info">
- inifo
- </span>
- <br>
- <span class="primary border border-dark">
- inifo
- </span>
- <br>
- <span class="danger border border-danger">
- inifo
- </span>
- </Div>
- </DIV>
- <script language="JavaScript">
- $(document).mousemove(function(e) {
- if ($.contains($("#aijquery")[0], e.target) || $("#aijquery")[0] == e.target) {
- $(".info").text("方法一: 鼠标在这个 DIV 里");
- } else {
- $(".info").text("方法一: 鼠标不在这个 DIV 里");
- }
- });
- $("#aijquery").mouseover(function() {
- $(".primary").text("方法二: 鼠标在这个 DIV 里");
- }).mouseout(function() {
- $(".primary").text("方法二: 鼠标不在这个 DIV 里");
- });
- $(document).mousemove(function(e) {
- var x = e.clientX;
- var y = e.clientY;
- var div_x_1 = $("#aijquery").offset().left;
- var div_y_1 = $("#aijquery").offset().top;
- var div_x_2 = $("#aijquery").offset().left + $("#aijquery").outerWidth();
- var div_y_2 = $("#aijquery").offset().top + $("#aijquery").outerHeight();
- if (x < div_x_1 || x > div_x_2 || y < div_y_1 || y > div_y_2) {
- $(".danger").text("方法三: 鼠标不在这个 DIV 里");
- } else {
- $(".danger").text("方法三: 鼠标在这个 DIV 里");
- }
- });
- </script>
- </body>
- </HTML>
效果图:
更多 web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/jquery/16697.html