JavaScript - получение HTML-элемента управления, указав координаты

Question

как я могу получить идентификатор элемента управления HTML, просто указав координаты инициируемого события (например, onmousedown, onmouseup, onclick и т. Д.). координаты можно получить по

e.clientX, e.clientY, где e - объект события.

Идея состоит в том, чтобы получить идентификатор элемента управления, для которого выполняется событие click, без какого-либо события onClick в определении этого элемента управления.

это избавит от необходимости указывать событие onClick для нескольких элементов управления.

Answer 1

Я не верю, что это возможно, но, к счастью (если я правильно понимаю ваши требования), вам не нужно:

Если вы хотите получить HTML-элемент, по которому пользователь щелкнул, без указания обработчика события щелчка для каждого элемента, просто укажите обработчик щелчка для элемента верхнего уровня (который содержит все другие интересные элементы - возможно, даже) документа "), а затем посмотрите на целевое свойство MouseEvent - оно будет указывать HTML-элемент, который изначально получил щелчок, а не элемент, в котором вы указали обработчик события onclick (это можно получить, просто используя ключевое слово this).

Если у вас есть firebug, попробуйте это в вашей консоли firebug прямо здесь, на StackOverflow:

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

Затем щелкните в любом месте текста вопроса, чтобы получить предупреждение с правильным элементом HTML :-).

Answer 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-элемент в документе и пытается найти тот, который содержит координату. Мы можем получить форму HTML-элемента, используя element.offsetTop и element.offsetWidth.

Я мог бы когда-нибудь использовать что-то подобное. Это может быть полезно, если вы хотите сделать что-то универсальное для всего документа. Как система всплывающих подсказок, которая работает где угодно, или система, которая запускает контекстные меню при любом щелчке левой кнопкой мыши. Было бы предпочтительнее найти какой-либо способ кэширования результатов getShape для элемента HTML ...

Answer 3

это избавит от необходимости указывать событие onClick для нескольких элементов управления.

Если это ваша единственная цель, я предлагаю использовать jQuery для элегантного определения обработчиков событий для нескольких элементов.

Это один из примеров jQuery tutorial , который делает именно это:

 $(document).ready(function() {
    $("a[href*=/content/gallery]").click(function() {
       // do something with all links that point somewhere to /content/gallery
    });
 })

Answer 4

Проверьте это:

http://www.quirksmode.org/dom/tests/elementfrompoint.html

Вы также можете увидеть ссылку MDC для того же вызова.

Answer 5

На самом деле вам не нужна позиция. Вам нужно целевое свойство объекта события . Я не знаю, как это делается в 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>

Answer 6

Когда ваша HTML-страница отображает позиции различных элементов, она будет динамически получена механизмом рендеринга вашего браузера. Единственные элементы, которые могут быть надежно проверены на предмет полученных свойств макета, - это изображения.

Поэтому, чтобы делать то, что вы хотите, вам нужно использовать абсолютное позиционирование для всех ваших элементов и иметь карту страницы, хранящуюся в другом месте, чтобы привязать элементы управления к местоположениям. Я думаю, это было бы слишком сложно!

Хотя это несколько противоречит вашему вопросу, через javascript или на стороне сервера вы должны прикрепить события onclick к вашим элементам управления. Извините!