jquery 如何获取鼠标当前位置相当于父元素的坐标 而不是相对于浏览器

jquery 如何获取鼠标当前位置相当于父元素的坐标 而不是相对于浏览器,第1张

jq只有获取元素相对于浏览器的

$(this)offset()left()忘了后边要不要小括号了

$(this)offset()top()

相对于父元素的话,把父元素的position设置成相对或绝对定位

然后documentgetElementById("dddd")offsetTop

documentgetElementById("dddd")offsetLeft

就是你要的了

function fn1(obj){

    var $li = $(obj)parent();

    var spclass = $lidata("spclass");

}

代码如下:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>获取鼠标在Canvas中的坐标位置</title>

<style>

#canvas{

border:1px solid #ccc;

width:300px;

height:300px;

overflow:hidden;

}

</style>

<script>

function get_canvas(ev,obj){

m_clientX = evclientX-objoffsetLeft;

m_clientY = evclientY-objoffsetTop;

documentgetElementById("tips")innerHTML = "当前坐标:X:"+ m_clientX + " ,Y:" +m_clientY;

}

</script>

</head>

<body>

<div id="tips"></div>

<div id="canvas" onmousemove="get_canvas(event,this)"></div>

</body>

</html>

兼容IE8+

用 javascript 获取当前页面上鼠标(光标)位置在许多情况下都会用到,比如拖放,悬停提示(tooltip) 等等。当然,这里我们依然要面对浏览器的兼容问题,在不同的浏览器下,对这些相关的属性处理方式也不同。

参考资料

首页 → 网络编程 → JavaScript → javascript技巧 → js获取鼠标位置实例详解脚本之家[引用时间2018-1-18]

稍等上代码!!

<html>

<head>

<script type="text/javascript">

function show_coords(event){

 var x = eventclientX;

 var y = eventclientY;

 var say = documentall("coords");

 sayinnerHTML = "X:"+x+" Y:"+y;

 saystyleposition = "absolute";

 saystyleleft = x + 30;

 saystyletop = y;

}

</script>

</head>

<body onmousemove="show_coords(event)">

<p id="coords"></p>

</body>

<html>

希望我的回答对你有用,有用就采纳!!!谢谢!

<div id=test contenteditable=true></div>

<script>

windowonload=function(){

   documentgetElementById("test")onkeydown=function(e){

      //当前元素是(e||event)currentTarget

      consolelog((e||event)currentTarget);

      //标签名称是(e||event)currentTargettagName

      consolelog((e||event)currentTargettagName);

   }

}

</script>

有时候会遇到这种需求,一个列表,鼠标放上去,滑到哪里,哪个元素就变色,如果列表是v-for循环出来的,该如何实现这种效果呢?

看案例:

其中使用了v-for遍历和v-bind绑定class样式,注意因为是改变单一元素的样式,所以需要获取对象元素的index,把index赋值到data中的变量mainIndex,在v-bind中通过判断当前元素的index是否等于mainIndex来作为添加样式条件。

效果如下:

以上就是关于jquery 如何获取鼠标当前位置相当于父元素的坐标 而不是相对于浏览器全部的内容,包括:jquery 如何获取鼠标当前位置相当于父元素的坐标 而不是相对于浏览器、js获取鼠标点击元素当中的信息、js如何获取鼠标指针在元素中的坐标等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/10136058.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-05
下一篇2023-05-05

发表评论

登录后才能评论

评论列表(0条)

    保存