如何仅通过指定触发事件的坐标(如 onmousedown、onmouseup、onclick 等)来获取 html 控件的 id。坐标可以通过
e.clientX , e.clientY 其中 e 是事件对象。
这个想法是获取完成单击事件的控件的 ID,而该控件的定义中没有任何 onClick 事件。
这将免除为多个控件指定 onClick 事件的需要。
如何仅通过指定触发事件的坐标(如 onmousedown、onmouseup、onclick 等)来获取 html 控件的 id。坐标可以通过
e.clientX , e.clientY 其中 e 是事件对象。
这个想法是获取完成单击事件的控件的 ID,而该控件的定义中没有任何 onClick 事件。
这将免除为多个控件指定 onClick 事件的需要。
我不认为这是可能的,但幸运的是(如果我正确理解您的要求)您不需要:
如果您想获取用户单击的 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 元素的警报 :-)。
这是一个非常好的问题,假设我们正在寻找的函数是这样的:
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 的结果...
这将免除为多个控件指定 onClick 事件的需要。
如果这是您唯一的目标,我建议使用 jQuery 优雅地为多个元素指定事件处理程序。
这是来自jQuery 教程的示例之一,它正是这样做的:
$(document).ready(function() {
$("a[href*=/content/gallery]").click(function() {
// do something with all links that point somewhere to /content/gallery
});
})
当您的 HTML 页面渲染时,各种元素的位置将由您的浏览器的渲染引擎动态得出。唯一可以对其结果布局属性进行可靠测试的元素是图像。
因此,要执行您想要的操作,您需要对所有元素使用绝对定位,并在其他位置存储一个页面地图以将控件与位置联系起来。我想这太复杂了!
尽管它与您的问题有些矛盾,但您应该通过 javascript 或服务器端将 onclick 事件附加到您的控件。对不起!
你实际上并不需要这个职位。您需要的是事件对象的目标属性。我不知道这是如何在 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>