Получите элемент в пределах щелкнутого пикселя?

Я не уверен, с чего начать, я уже несколько дней искал Google, пытаясь выяснить, как получить элемент, который находится в выбранном/щелкнутом пикселе на странице. Я наткнулся на эту функцию от напарницы, но я понятия не имею, что он делает:Получите элемент в пределах щелкнутого пикселя?

function onclick(e){ 
    var x = e.clientX, 
     y = e.clientY; 

    $("*").filter(function(){ 
     position.left > x && position.left + width < x; 
     /*same for height*/; 
    }); 
}

Проще говоря, мне нужно, чтобы иметь возможность нажать на пиксель и получить/элемент Div, который находится в пределах этого пикселя. Это не так просто для моего приложения, так как просто говорят div .class, например, потому что элементы перекрывают друг друга с непрозрачностью и z-индексом.

источник

2017-02-21 Joe Scotto

Что значит «внутри пикселя»? Вы имеете в виду элемент, в котором находится пиксель? – isherwood

@isherwood В принципе, если щелкнуть, это тот элемент, который он выберет. Игнорирование DOM, только захват элементов, где они на самом деле не являются заполнением, шириной, краем и т. Д. –

, чтобы узнать, почему все происходит, используя некоторый CSS для установки 'a {color: transparent; фон: красный; } 'потому что текстовые элементы являются прямоугольниками, как и любой другой элемент без обрезки CSS. Вам буквально нужно было бы приблизиться к магии, чтобы определить, где вы щелкнули - это пробел или отрицательное пространство в соответствии с движком текста, связанным со строкой в элементе, который вы нажали. Поэтому я уверен, что это невозможно без какой-либо фантастической и сложной магии кода. –

код, как показано в этом вопросе не будет работать, так как переменные position, width не определены, однако его основная идея правильная - цикл через все элементы и сравните координаты щелкните на поле каждого элемента.

Хотел попробовать самостоятельно. Переместил рабочую демонстрацию here вместо фрагмента.

источник

2017-02-21 17:35:07

** Редактировать: ** переместил демонстрацию на внешнюю страницу, потому что среда SO snippet была слишком большой для этого примера. –

Это то, что я хотел, и я собираюсь принять ответ. Из того, что я читал, это примерно так же хорошо, как вы можете получить. Благодарю. –

Щелчок в любом месте документа записывает элемент с кликом.

$(document).click(function(e) { 
 
    console.log(e.target); 
 
});

.box { 
 
    width: 50px; 
 
    height: 50px; 
 
    background: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='box'></div>

источник

2017-02-21 16:29:42

Это именно то, чего я '' не хочу и 'не будет' работать. Элементы в моем приложении перекрываются друг с другом с z-индексом и непрозрачностью, поэтому я не могу просто выбрать элемент с щелчком, я различаюсь на основе щелчка по пикселям. –

Я думаю, что это едва возможно. Если я ошибаюсь и это возможно, вам понадобится * много кода. * –

@Kinduser Довольно возможно, и не так много кода. См. Мой ответ. Хотя учет некоторых смешных вопросов, например, что делать с iframes, border-radiuses и т. Д., Действительно будет означать гораздо большую работу. –

Вы можете использовать document.elementFromPoint(x, y);, если вы хотите, чтобы получить элемент по й и у координат. См. here для документов.

function onclick(e){ 
    var x = e.clientX, 
     y = e.clientY, 
     el = document.elementFromPoint(x, y); 
}

Fiddle here

источник

2017-02-21 16:31:12 Steveo

Как я и ожидал. Это не работает. https://jsfiddle.net/af2m32sv/2/ –

Это классный метод, но он возвращает только самый верхний элемент. Об этом ясно говорится в предоставленной статье MDN. –

Получите элемент в пределах щелкнутого пикселя?

ответ

Смежные вопросы