Как исправить код, который должен выделять выделенную область с помощью CSS
Чего я хочу добиться, так это сделать функциональность типа «выбор для проверки», как и в браузерах. Он должен иметь только функцию создания временного элемента, который будет наложен на элемент, на который наведена моя мышь.
Я создал скринкаст, чтобы показать вам, каким он должен быть и что у меня есть сейчас.
Мой код
function create_div(){
let style = `
background-color: rgba(130, 180, 230, 0.5);
outline: solid 1px #0F4D9A;
box-sizing: border-box;
position: absolute;
display: block;
z-index: 999999;
`
let e = document.createElement('DIV')
e.setAttribute('id', 'tester')
e.setAttribute('style', style)
document.body.appendChild( e )
}
create_div()
$( "body" ).mousemove(function( event ) {
$( '#tester' ).css({'display' : 'none'})
let target = $( event.target )
$( '#tester' ).css({'display' : 'block', "width": target.width(),
'height': target .height(), 'top' : target .offset().top,
'left' : target .offset().left});
})
Это мой код, написанный с помощью jQuery
Он создает DIV на странице, а затем, в событии mousemove, я устанавливаю его значения (высоту, ширину и положение)
быть таким же, как элемент, на котором я наведен. Но при наведении курсора я получаю несколько глючных окон.
Что мне здесь не хватает?
@epascarello Но я удаляю его с помощью `$ ('#tester') .css ({'display': 'none'})
Привет, @Vlada, вашему видео требуется доступ для просмотра. На этой ноте попробуйте добавить pointer-events: none в свои стили. Вроде убрал глючность.
@Jack Привет, я изменил ссылку, теперь она должна быть доступна для просмотра
Спасибо @Vlada, видео могу посмотреть. Вы пробовали применить pointer-events: none к вашему блоку style?
@Jack Да, похоже, это то, что мне нужно. Спасибо!
Привет, @AndreiGheorghiu, спасибо за понимание. Подскажите, каковы ограничения pointer-events? Почему я должен этого избегать?
Если подумать, pointer-events имеет смысл. Вы хотите, чтобы указатель естественным образом мешал работе со страницей.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вам нужно добавить pointer-events: none; в CSS #tester - это сделает DIV прозрачным для событий мыши. Это отключение от наведения мыши
Чтобы убить еще один возможный источник сбоя, давайте просто сохраним где-нибудь последнюю обработанную вами цель, чтобы не было необходимости снова изменять размер / перерисовывать #tester.
Это приведет к:
function create_div(){
$("body").append(
$("<div id=\"tester\"></div>").css({
"background-color": "rgba(130, 180, 230, 0.5)",
"outline": "solid 1px #0F4D9A",
"box-sizing": "border-box",
"position": "absolute",
"display": "block",
"z-index": "999999",
"pointer-events": "none"
})
);
}
$(document).ready(create_div);
$("body").mousemove(function( event ) {
let target = $(event.target)
if (target.length === 0){
$("#tester").css({
"display" : "none"
});
$("#tester").data("target", null);
}else if (
$("#tester").data("target") === null ||
$("#tester").data("target") !== target
){
$("#tester").data("target", target);
$("#tester").css({
"display" : "block",
"width" : target.width(),
"height" : target.height(),
"top" : target.offset().top,
"left" : target.offset().left
});
}
// else {leave #tester with no changes}
});
потому что вы зависаете над добавленным элементом ....