JS和Jquery判断鼠标点击位置在元素内，还是在元素外

最新推荐文章于 2024-06-25 19:41:10 发布

置顶逆风笑@

最新推荐文章于 2024-06-25 19:41:10 发布

阅读量1w

点赞数 2

文章标签： Javascript Jquery 鼠标点击位置

本文链接：https://blog.csdn.net/qq_41090476/article/details/96111016

版权

html实例:

<!DOCTYPE html>
<html>
<head>
	<title>test</title>
	<style type="text/css">
		#parent{
			height:500px;
			width: 200px;
			border: 1px solid red;
			margin:auto;
		}
		#child_one{
			height: 200px;
			width: 100px;
			border: 1px solid blue; 
		}
		.child_two{
			height: 100px;
			width: 50px;
			border: 1px solid black;
		}
		#first{
			height: 100px;
			width: 50px;
			border: 1px solid green;
		}
	</style>
	　<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>
	<div id="parent">
		<div id="child_one">
			<div id="first">
				
			</div>
		</div>
		<div class="child_two">
			
		</div>
	</div>

</body>
</html>

方法一：通过JS

document.getElementById('parent').onclick=function(e){
        var e = e || window.event;
        var elem = e.target;
        var targetArea = document.getElementById('child_one');
        if(targetArea.contains(elem)){
            alert("在区域内");
        }else{
            alert("在区域外");
        }
    }

方法二：通过Jquery

$('#parent').click(function(e){
	var e = e || window.event;
	var elem = e.target;
	if($(elem).is('#child_one') || $(elem).is('#child_one *')){
		alert("在区域内");
	}else{
		alert("在区域外");
	}	
})

逆风笑@

关注

2
点赞
踩
18

收藏

觉得还不错? 一键收藏
打赏
4
评论
JS和Jquery判断鼠标点击位置在元素内，还是在元素外

html实例:<!DOCTYPE html><html><head> <title>test</title> <style type="text/css"> #parent{ height:500px; width: 200px; border: 1px solid red; marg...
复制链接

扫一扫