鼠标的点击事件

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了鼠标的点击事件相关的知识,希望对你有一定的参考价值。

参考技术A <body>

    <div class="one"></div>

    <script>

        let one = document.querySelector('.one')

        // 点击事件

        one.onclick = function()

            console.log('点击事件');

       

        // 双击事件

        one.ondblclick = function()

            console.log('双击事件');

       

        // 鼠标右键点击事件

        one.oncontextmenu = function()

            console.log('鼠标右键点击事件');

       

        // 鼠标进入事件(onmouseenter比onmouseover先执行)

        one.onmouseenter = function()

            console.log('鼠标进入事件');

       

        // 鼠标离开事件(onmouseleave比onmouseout先执行)

        one.onmouseleave = function()

            console.log('鼠标离开事件');

       

         // 鼠标进入事件2

         one.onmouseover = function()

            console.log('鼠标进入事件onmouseover');

       

        // 鼠标离开事件2

        one.onmouseout = function()

            console.log('鼠标离开事件onmouseout');

       

        // 注意:如果元素里面存在子元素,鼠标在元素中移动时会反复触发 onmouseover 和 onmouseout

        // 鼠标移动事(所有的事件方法,都有一个默认的参数:事件对象)

        one.onmousemove = function()

            console.log('鼠标正在移动');

       

        // 鼠标按下事件

        one.onmousedown = function()

            console.log('鼠标按下');

       

        // 鼠标弹起

        one.onmouseup = function()

            console.log('鼠标弹起');

       

    </script>

</body>

js获取鼠标点击事件的相对位置

如图

我需要获取图片上点击事件相对于图片左上方原点(0,0)的位置,最好要能考虑到滚动条的影响的,谢谢了~

<html>
<head>
<title>位置</title>
<script language="javascript" type="text/javascript">
function m()
document.getElementById("area").innerHTML=event.clientX +" , "+event.clientY;

function c()
var objTop = getOffsetTop(document.getElementById("d"));//对象x位置
var objLeft = getOffsetLeft(document.getElementById("d"));//对象y位置

var mouseX = event.clientX+document.body.scrollLeft;//鼠标x位置
var mouseY = event.clientY+document.body.scrollTop;//鼠标y位置
//计算点击的相对位置
var objX = mouseX-objLeft;
var objY = mouseY-objTop;
clickObjPosition = objX + "," + objY;

alert(clickObjPosition);


function getOffsetTop(obj)
var tmp = obj.offsetTop;
var val = obj.offsetParent;
while(val != null)
tmp += val.offsetTop;
val = val.offsetParent;

return tmp;

function getOffsetLeft(obj)
var tmp = obj.offsetLeft;
var val = obj.offsetParent;
while(val != null)
tmp += val.offsetLeft;
val = val.offsetParent;

return tmp;

</script>

</head>
<body style="margin:0px;" onmousemove="m();">
<div style="padding:90px;border:1px solid #ccc;font-size:36px;width:800px;height:800px;"> </div>
<div id="area"></div>
<div style="width:1400px;height:300px;border:1px solid red;padding-left:1200px;">
<div id="d" style="width:200px;height:200px;border:1px solid green;padding:10px;cursor:hand;" onclick="c()">这里是图片,因为我用div边框1px,所以两个div会有2px的位置偏移,你可以自己调整</div>
</div>
</body>
</html>

现写的,你可以copy下来创建个html自己研究下,不难
参考技术A

常用的是 event.clientX和event.clientY分别获取横向的和纵向的位置,但仅使用这个方法是不够的,因为event.clientX和event.clientY获取的鼠标位置是相对于当前屏幕的,而不考虑页面的滚动条所滚动的距离。

function pointerX(event) 
 
return event.pageX || (event.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft)); 
 

function pointerY(event) 
 
return event.pageY || (event.clientY + (document.documentElement.scrollTop || document.body.scrollTop)); 

以上是关于鼠标的点击事件的主要内容,如果未能解决你的问题,请参考以下文章

js获取鼠标点击事件的相对位置

Java JTable 添加了一个键盘事件,和鼠标点击事件的监听,如何在我键盘事件起作用时,让鼠标事件失效

如何在Android应用里屏蔽鼠标点击事件

js获取鼠标点击事件的相对位置

js获取鼠标点击事件的相对位置

鼠标的点击事件