判断鼠标点击的位置是否在规定的div范围内部代码,Js代码库,德仔网

代码语言

代码分类

【Js】判断鼠标点击的位置是否在规定的div范围内部

作者: / 发布于2017/3/14/ 686

<html xmlns="http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js 判断鼠标位置让div消失</title>

<style type="text/css">
<!-- 
body{margin:0px;padding:0px;}
-->
</style>
<script>
function c()
{
    document.getElementById('h_div').style.display = "";
    return false;
}
function d()
{
    //alert(window.event.clientX);
    //alert(window.event.clientY);
    var wx = window.event.clientX;
    var wy = window.event.clientY;
    var d_left = document.getElementById('h_div').offsetLeft;
    var d_top = document.getElementById('h_div').offsetTop;
    var d_width = document.getElementById('h_div').clientWidth;
    var d_height = document.getElementById('h_div').clientHeight;
 //alert(wx + '_' + wy + '_' + d_left + '_' + d_width + '_' + d_top + '_' + d_height)
    if(wx < d_left || wy < d_top || wx > (d_left + d_width) || wy > (d_top + d_height))
    document.getElementById('h_div').style.display = "none";
    return false;
}
</script>
</head>
<body onClick="javascript:d();" > 
<div onMouseOver="javascript:c();" style="width:150px;height:30px;margin:auto;margin-left:200px;border:1px solid red;position:relative;">
    Click me
</div>
<div id="h_div" style="display:none;position:absolute;margin-top:0px;margin-left:200px;width:150px;height:100px;border:1px solid green;font-size:12px;">
    <input type="checkbox" id="aa" name="aa" title=""/><label for="aa">第一个</label>
    <input type="checkbox" id="bb" name="bb" title=""/><label for="bb">第二个</label>
    <input type="checkbox" id="cc"  name="cc" title=""/><label for="cc">第三个</label>
    <input type="checkbox" id="dd" name="dd" title=""/><label for="dd">第四个</label>
    <input type="checkbox" id="ee" name="ee" title=""/><label for="ee">第五个</label>
    </div>
</body>
</html> 


---------------------------------2012.08.20---------------------------------------------
今天发现了一个新的方法：
$(document).ready(function(){
    $("#infoWindow").live("mouseenter",function(){
           //处理流程
    });
    $("#infoWindow").live("mouseleave",function(){
        //处理流程
    });
    
});

关键在于函数：mouseenter和mouseleave，这两个函数是jQuery封装的函数，
可以监控鼠标移近和移出指定的div

试试其它关键字

同语言下

可能有用的

贡献的其它代码Label