3

如何仅通过指定触发事件的坐标（如 onmousedown、onmouseup、onclick 等）来获取 html 控件的 id。坐标可以通过

e.clientX , e.clientY 其中 e 是事件对象。

这个想法是获取完成单击事件的控件的 ID，而该控件的定义中没有任何 onClick 事件。

这将免除为多个控件指定 onClick 事件的需要。

4

5 回答 5

5

我不认为这是可能的，但幸运的是（如果我正确理解您的要求）您不需要：

如果您想获取用户单击的 HTML 元素，而不在每个元素上指定单击事件处理程序，只需在顶级元素（包含所有其他有趣元素 - 甚至可能是“文档”的元素）上指定一个单击处理程序，然后查看 MouseEvent 的 target 属性——它将指定最初接收点击的 HTML 元素，而不是您指定 onclick 事件处理程序的元素（这可以通过使用“this”关键字简单地获得）。

如果你有 firebug，请在 StackOverflow 上的 firebug 控制台中尝试一下： 

document.getElementById('question').onclick = function(e) { 
  var target = window.event?window.event.srcElement:e.target; 
  alert("Got click: " + target); 
}

然后单击问题文本上的任意位置以获取包含正确 HTML 元素的警报 :-)。

于 2009-02-26T11:27:31.167 回答
2

这是一个非常好的问题，假设我们正在寻找的函数是这样的：

document.elementFromPoint = function(x,y) { return element; };

这个不起眼的功能实际上是在 Firefox 3.0 中使用 gecko 布局引擎实现的。

https://developer.mozilla.org/en/DOM/document.elementFromPoint

但它在其他任何地方都不起作用。您可以自己构建此功能：

document.elementFromPoint = function(x,y) {

    // Scan through every single HTML element
    var allElements = document.getElementsByTagName("*");

    for( var i = 0, l = allElements.length; i < l; i++ ) {

        // If the element contains the coordinate then we found an element:
        if( getShape(allElements[i]).containsCoord(x,y) ) {
            return allElements[i];
        }

    }

    return document.body;

};

这将非常缓慢，但是，它可能会起作用！如果您正在寻找这样的东西来使您的 HTML 代码更快，那么请找到其他东西......

基本上，它会遍历文档中的每一个 HTML 元素，并尝试找到一个包含坐标的元素。我们可以使用 element.offsetTop 和 element.offsetWidth 来获取 HTML 元素的形状。

有一天我可能会发现自己使用这样的东西。如果您想在整个文档中创建通用内容，这可能会很有用。就像可以在任何地方工作的工具提示系统，或者在任何左键单击时启动上下文菜单的系统。最好找到某种方法在 HTML 元素上缓存 getShape 的结果...

于 2009-08-23T00:08:27.357 回答
1

这将免除为多个控件指定 onClick 事件的需要。

如果这是您唯一的目标，我建议使用 jQuery 优雅地为多个元素指定事件处理程序。

这是来自jQuery 教程的示例之一，它正是这样做的：

 $(document).ready(function() {
    $("a[href*=/content/gallery]").click(function() {
       // do something with all links that point somewhere to /content/gallery
    });
 })
于 2009-02-26T11:23:53.030 回答
0

当您的 HTML 页面渲染时，各种元素的位置将由您的浏览器的渲染引擎动态得出。唯一可以对其结果布局属性进行可靠测试的元素是图像。

因此，要执行您想要的操作，您需要对所有元素使用绝对定位，并在其他位置存储一个页面地图以将控件与位置联系起来。我想这太复杂了！

尽管它与您的问题有些矛盾，但您应该通过 javascript 或服务器端将 onclick 事件附加到您的控件。对不起！

于 2009-02-26T11:32:35.943 回答
0

你实际上并不需要这个职位。您需要的是事件对象的目标属性。我不知道这是如何在 jQuery 中处理的，但这里有一个受上述资源启发的快速示例：

JavaScript

<script type="text/javascript">
window.onload = function() {
    document.body.onclick = function(event) {
        alert(event.target.id);
    }
}
</script>

CSS

div {
 width: 200px;
 height: 200px;
 margin: 30px;
 background: red;
}

HTML

<div id="first-div"></div>
<div id="second-div"></div>
于 2009-02-26T11:35:36.793 回答