`

有鼠标位置获取元素

 
阅读更多
 document.elementFromPoint(x,y)可以获得x和y坐标处的元素的引用;

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<script>
function create_a(evt)
{
   alert(123);
   var left = evt.screenX;


   var top = evt.screenY;


   var client_x = evt.clientX;
   var client_y = evt.clientY;



   alert("left="+left);
   alert("top="+top);

   alert("client_x=" + client_x);
   alert("client_y=" + client_y);

   var obj = document.elementFromPoint(left,top);
   alert("obj=" + obj);
   alert("obj.id=" + obj.id);
    alert("obj.nodeName=" + obj.nodeName);

   var obj2 = document.elementFromPoint(client_x,client_y);
   alert("obj2=" + obj2);
   alert("obj2.id=" + obj2.id);
   alert("obj2.nodeName=" + obj2.nodeName);



/*
//var SVGDoc=evt.getTarget().getOwnerDocument();
var SVGDoc=evt.target.ownerDocument;
var txt=SVGDoc.getElementById("txt");
var link=SVGDoc.createElement("a");
var text_node=SVGDoc.createTextNode("LINK");

link.setAttributeNS(
"http://www.w3.org/1999/xlink",
"xlink:href",
"http://www.w3schools.com");

link.appendChild(text_node);
txt.appendChild(link);
*/
}
</script>

<text id="txt" x="10" y="10">Click on the circle to create a ....</text>
<circle id = "circle_1" cx="20" cy="40" r="1.5em" style="fill:blue" onclick="create_a(evt)"/>

</svg>
分享到:
评论

相关推荐

    CSS——ajax特效\获取鼠标位置

    CSS/ajax 鼠标位置获取技术详解 在 Web 开发中,获取鼠标位置是非常重要的一项技术,特别是在交互式网页设计、图像处理、游戏开发等领域。今天,我们将介绍两种使用 CSS 和 Ajax 实现鼠标位置获取的方法。 获取...

    Javascript元素位置、大小、鼠标定位操作

    Javascript 元素位置、大小、鼠标定位操作 本文将详细介绍 Javascript 中元素位置、大小、鼠标定位操作相关的知识点,包括事件对象、DOM 对象、Style 对象等提供的相关属性和方法。 一、事件对象 Event 事件对象 ...

    鼠标位置 鼠标在屏幕的位置 坐标

    在探讨“鼠标位置 鼠标在屏幕的位置 坐标”这一主题时,我们深入研究如何在程序设计中获取并应用鼠标在屏幕上的位置坐标。这个知识点在游戏开发、图形用户界面(GUI)设计、自动化脚本以及任何需要与用户输入交互的...

    WPF获取鼠标在屏幕的位置

    此外,如果在同一时刻有多个元素尝试捕获鼠标,WPF只会允许一个元素捕获鼠标。 `CaptureMouse`的使用场景广泛,比如在设计拖放操作时,我们可以在`MouseDown`事件中捕获鼠标,然后在`MouseMove`事件中计算鼠标的...

    JavaScript获取鼠标位置和鼠标与div的相对位置

    在JavaScript中,获取鼠标位置和计算鼠标与特定div元素的相对位置是常见的需求,这在交互式网页开发中尤其重要。下面将详细讲解如何实现这些功能。 首先,我们需要理解两个基本概念:`event.clientX` 和 `event....

    获取鼠标点击元素,类似于元素查找

    获取鼠标点击元素

    获取鼠标相对位置

    这时,我们可以使用`getBoundingClientRect()`方法来获取元素的几何信息,然后结合`event.clientX`和`event.clientY`计算出相对位置: ```javascript document.getElementById('myElement').addEventListener('...

    控制台下获取鼠标位置

    然而,通过特定的技术和库,我们可以在控制台环境中获取鼠标的位置。这在某些需要低级输入处理或调试的场景中是很有用的。本文将深入探讨如何在控制台下获取鼠标位置,主要涉及以下几个方面: 1. **API调用**: 在...

    JS获取鼠标位置(兼容FF)

    这个功能使得我们可以根据鼠标的实时位置执行某些操作,比如创建动态提示、跟随鼠标移动的元素或者在特定位置显示信息。标题“JS获取鼠标位置(兼容FF)”指的是用JavaScript实现一个能在不同浏览器,特别是Internet...

    获取鼠标当前坐标

    获取鼠标在当前屏幕坐标系中的位置信息 将鼠标移动到要获取位置的点,然后按F10,就会弹出当前的坐标值

    c# 获取全局的鼠标坐标

    此外,如果你正在使用WPF(Windows Presentation Foundation)框架,还可以利用`MouseDevice`类的静态方法`GetPosition`获取鼠标位置,但请注意,这个方法返回的是相对于指定UI元素的坐标,而不是屏幕坐标。要获取...

    火狐兼容获取鼠标的坐标

    标题“火狐兼容获取鼠标的坐标”涉及到的是在网页开发中如何在Firefox浏览器上获取鼠标指针的位置。在Web开发中,特别是在JavaScript编程中,获取鼠标坐标是一项常见的需求,用于实现各种交互效果,如拖放功能、点击...

    前端canvas例子,如何获取鼠标在canvas中的位置。

    canvas例子,如何获取鼠标在canvas中的位置。html+js。下载双击即可在浏览器运行,F12可查看源代码。

    WPF中获取鼠标相对于屏幕的位置

    通常情况下,我们会使用`Mouse.GetPosition(IInputElement relativeTo)`或者`MouseEventArgs.GetPosition(IInputElement relativeTo)`这两个方法来获取鼠标相对于某个特定界面元素的位置。这些方法非常方便,但在...

    vb获取鼠标坐标及判断位置

    在VB(Visual Basic)编程中,获取鼠标坐标和判断其位置是常见的需求,尤其是在开发交互式应用程序时。本文将深入探讨如何使用VB实现这一功能,并介绍相关知识点。 首先,VB提供了一个名为`MousePosition`的全局...

    vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法

    this.$refs[‘通过设置ref获取到的dom元素’]....以上这篇vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持软件开发网。

    鼠标在canvas上悬浮,并提示鼠标位置信息

    现在我们有了鼠标在Canvas上的坐标(x, y),可以将这些信息显示出来。一种简单的方式是在Canvas上绘制文本,使用`fillText`方法: ```javascript var ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, canvas....

    javascript获取鼠标当前位置坐标并显示

    为了显示鼠标的位置坐标,我们需要获取页面中的输入框元素,并将其`value`属性设置为当前的坐标值。 ```javascript function mouseMove(ev) { Ev = ev || window.event; var mousePos = mouseCoords(ev); ...

    js 鼠标位置 div拖拽

    - 在`mousemove`事件中,我们获取当前鼠标的位置,然后根据初始鼠标位置和div原始位置计算出新的div坐标。 - 使用CSS的`left`和`top`属性设置div的新位置,公式通常是`newLeft = initialMouseX + currentMouseX - ...

    显示鼠标实时位置

    例如,在游戏开发中,开发者可能需要确认游戏元素是否响应了正确的鼠标位置;在图像编辑软件中,精确的鼠标坐标可以帮助用户进行细节调整;在教学环境中,教师可以使用这个工具来直观地演示鼠标操作过程。 总结来说...

Global site tag (gtag.js) - Google Analytics