마우스가 jQuery의 요소 위에 있는지 확인하려면 어떻게 해야 합니까?
제가 빠진 jQuery에서 빠르고 쉬운 방법이 있습니까?
마우스 오버 이벤트는 이미 다른 용도로 사용하고 있기 때문에 사용하고 싶지 않습니다.마우스가 주어진 순간에 요소 위에 있는지만 알면 됩니다.
"Is MouseOver" 기능만 있다면 다음과 같은 작업을 수행하고 싶습니다.
function hideTip(oi) {
setTimeout(function() { if (!IsMouseOver(oi)) $(oi).fadeOut(); }, 100);
}
깨끗하고 우아한 호버 점검:
if ($('#element:hover').length != 0) {
// do something ;)
}
이 코드는 해리와 내가 말하려고 하는 해피타임을 보여줍니다.마우스가 들어가면 도구 설명이 나오고 마우스가 나가면 사라지기 위한 지연 시간이 설정됩니다.지연이 트리거되기 전에 마우스가 동일한 요소를 입력하면 이전에 저장한 데이터를 사용하여 트리거가 시작되기 전에 트리거를 파괴합니다.
$("someelement").mouseenter(function(){
clearTimeout($(this).data('timeoutId'));
$(this).find(".tooltip").fadeIn("slow");
}).mouseleave(function(){
var someElement = $(this),
timeoutId = setTimeout(function(){
someElement.find(".tooltip").fadeOut("slow");
}, 650);
//set the timeoutId, allowing us to clear this trigger if the mouse comes back over
someElement.data('timeoutId', timeoutId);
});
경고:is(':hover')jquery 1.8+에서는 더 이상 사용되지 않습니다.해결 방법은 이 게시물을 참조하십시오.
https://stackoverflow.com/a/6035278/8843 을 사용하여 마우스가 요소를 가리키고 있는지 테스트할 수도 있습니다.
$('#test').click(function() {
if ($('#hello').is(':hover')) {
alert('hello');
}
});
마우스가 페이드아웃되도록 시간 초과를 설정하고 반환 값을 개체의 데이터에 저장합니다.그런 다음 마우스 오버 시 데이터에 값이 있으면 시간 초과를 취소합니다.
페이드아웃 콜백 시 데이터를 제거합니다.
마우스 입력/마우스 탈퇴를 사용하는 것은 어린이가 마우스를 사용하여 불을 끌 때 메뉴를 표시하지 않기 때문에 실제로 비용이 적게 듭니다.
jQuery를 사용할 수 .hover수동으로 추적할 이벤트:
$(...).hover(
function() { $.data(this, 'hover', true); },
function() { $.data(this, 'hover', false); }
).data('hover', false);
if ($(something).data('hover'))
//Hovered!
저는 이것과 정확히 같은 것이 필요했습니다(조금 더 복잡한 환경에서 '마우스 엔터테이너'와 '마우스 리프'가 많은 솔루션이 제대로 작동하지 않았습니다). 그래서 저는 마우스 오버 방식을 추가하는 작은 jquery 플러그인을 만들었습니다.그것은 지금까지 꽤 잘 작동했습니다.
//jQuery ismouseover method
(function($){
$.mlp = {x:0,y:0}; // Mouse Last Position
function documentHandler(){
var $current = this === document ? $(this) : $(this).contents();
$current.mousemove(function(e){jQuery.mlp = {x:e.pageX,y:e.pageY}});
$current.find("iframe").load(documentHandler);
}
$(documentHandler);
$.fn.ismouseover = function(overThis) {
var result = false;
this.eq(0).each(function() {
var $current = $(this).is("iframe") ? $(this).contents().find("body") : $(this);
var offset = $current.offset();
result = offset.left<=$.mlp.x && offset.left + $current.outerWidth() > $.mlp.x &&
offset.top<=$.mlp.y && offset.top + $current.outerHeight() > $.mlp.y;
});
return result;
};
})(jQuery);
그런 다음 문서의 모든 위치에서 이렇게 호출하면 true 또는 false가 반환됩니다.
$("#player").ismouseover()
IE7+, Chrome 1+, Firefox 4에서 테스트해보고 정상적으로 작동하고 있습니다.
jQuery에서는 .is(':hover')를 사용할 수 있습니다.
function IsMouseOver(oi)
{
return $(oi).is(':hover');
}
이제 OP에서 요청한 기능을 제공하는 가장 간결한 방법이 될 것입니다.
참고: 위의 내용은 IE8 이하에서는 작동하지 않습니다.
덜 If If If If If If If If If If If If If If If If If If If If If modus if If If If If If If If If If If If If If If If If If If I.$(...).hover(...)모든 곳에서, 요소에 대한 선택기를 알 필요도 없습니다(이 경우 Ivo의 대답이 더 쉽습니다).
function IsMouseOver(oi)
{
return oi.length &&
oi.parent()
.find(':hover')
.filter(function(s){return oi[0]==this})
.length > 0;
}
저는 SLaks의 아이디어를 받아 작은 클래스로 포장했습니다.
function HoverWatcher(selector){
this.hovering = false;
var self = this;
this.isHoveringOver = function() {
return self.hovering;
}
$(selector).hover(function() {
self.hovering = true;
}, function() {
self.hovering = false;
})
}
var box1Watcher = new HoverWatcher('#box1');
var box2Watcher = new HoverWatcher('#box2');
$('#container').click(function() {
alert("box1.hover = " + box1Watcher.isHoveringOver() +
", box2.hover = " + box2Watcher.isHoveringOver());
});
미래의 발견자들을 위해 참고하세요.
저는 이것과 더 많은 것을 할 수 있는 jQuery 플러그인을 만들었습니다.내 플러그인에서 현재 커서가 가려진 모든 요소를 가져오려면 다음을 수행하면 됩니다.
$.cursor("isHover"); // will return jQ object of all elements the cursor is
// currently over & doesn't require timer
제가 언급했듯이, 그것은 또한 당신이 볼 수 있는 것처럼 많은 다른 용도를 가지고 있습니다.
jsFiddle은 여기에 있습니다.
제가 코멘트할 수 없기 때문에 답변으로 작성하겠습니다!
css selector ":hover"와 호버 이벤트의 차이점을 이해해주세요!
이며 ":css"와 같이 할 때 되었습니다.$("#elementId").is(":hover")jQuery 이벤트 호버와는 전혀 관련이 없다는 뜻입니다.
를 암화하로 $("#elementId:hover")으로 할 때 합니다.위의 문장은 순수하고 합법적인 CSS 선택으로 이 요소를 선택할 때 모든 jQuery 버전에서 작동합니다.
반면에 이벤트 호버는 다음과 같습니다.
$("#elementId").hover(
function() {
doSomething();
}
);
실제로 jQuery 웹사이트의 상태는 jQuery 1.8로 사용되지 않습니다.
이벤트 이름 "hover"가 사용되면 이벤트 하위 시스템이 이벤트 문자열에서 "mouse enter mouse leave"로 변환합니다.이는 다음과 같은 몇 가지 이유로 인해 성가신 문제입니다.
의미론:호버링은 마우스가 요소를 입력하고 나가는 것과 동일하지 않습니다. 이는 발사 전에 어느 정도의 감속 또는 지연을 의미합니다.이벤트 이름:첨부된 핸들러에서 반환된 event.type은 hover가 아니라 mouse enter 또는 mouse leave입니다.다른 이벤트는 이를 수행하지 않습니다."호버" 이름 공동 선택:"hover"라는 이름의 이벤트를 첨부하고 .trigger("hover")를 사용하여 이벤트를 실행할 수 없습니다.문서에서는 이미 이 이름을 "새로운 코드에 대해 강력하게 권장되지 않음"이라고 부르고 있습니다. 저는 공식적으로 1.8에 대해 이 이름을 사용하지 않고 결국 제거하고 제거하고 싶습니다.
그들이 사용을 제거한 이유는 명확하지 않지만, 위와 같이 사용할 수 있고 여전히 사용하기 위한 약간의 해킹이 있습니다.
(function ($) {
/**
* :hover selector was removed from jQuery 1.8+ and cannot be used with .is(":hover")
* but using it in this way it works as :hover is css selector!
*
**/
$.fn.isMouseOver = function() {
return $(this).parent().find($(this).selector + ":hover").length > 0;
};
})(jQuery);
아 그리고 저는 타임아웃 버전을 추천하지 않을 것입니다. 이것은 많은 복잡성을 초래하기 때문입니다. 만약 다른 방법이 없다면 이러한 종류의 것에 타임아웃 기능을 사용하고 저를 믿으세요, 모든 경우의 95%에 다른 방법이 있습니다!
제가 밖에서 몇 명을 도울 수 있기를 바랍니다.
그리츠 앤디
두 분 덕분에.어느 시점에서 저는 마우스가 여전히 요소 위에 있는지 감지하는 것을 포기해야 했습니다.가능한 것은 알지만 코드가 너무 많이 필요할 수도 있습니다.
시간이 좀 걸렸지만 당신의 제안을 모두 받아들여 저에게 맞는 것을 생각해냈습니다.
다음은 단순화된(그러나 기능적인) 예입니다.
$("[HoverHelp]").hover (
function () {
var HelpID = "#" + $(this).attr("HoverHelp");
$(HelpID).css("top", $(this).position().top + 25);
$(HelpID).css("left", $(this).position().left);
$(HelpID).attr("fadeout", "false");
$(HelpID).fadeIn();
},
function () {
var HelpID = "#" + $(this).attr("HoverHelp");
$(HelpID).attr("fadeout", "true");
setTimeout(function() { if ($(HelpID).attr("fadeout") == "true") $(HelpID).fadeOut(); }, 100);
}
);
그런 다음 일부 텍스트에서 이 작업을 수행하려면 다음 작업만 수행하면 됩니다.
<div id="tip_TextHelp" style="display: none;">This help text will show up on a mouseover, and fade away 100 milliseconds after a mouseout.</div>
This is a <span class="Help" HoverHelp="tip_TextHelp">mouse over</span> effect.
많은 고급 CSS와 함께, 이것은 도움말 툴팁 위에 아주 멋진 마우스를 놓을 수 있게 해줍니다.그런데, 확인란과 텍스트 사이의 작은 간격 때문에 마우스를 움직일 때 도움말이 깜박거리기 때문에 마우스 아웃이 지연되어야 했습니다.하지만 이것은 매력적으로 작용합니다.저는 또한 초점/흐림 이벤트를 위해 비슷한 것을 했습니다.
여기에 사용되는 시간 초과가 많이 보이는데, 이벤트의 맥락에서 다음과 같은 좌표를 볼 수 없습니까?:
function areXYInside(e){
var w=e.target.offsetWidth;
var h=e.target.offsetHeight;
var x=e.offsetX;
var y=e.offsetY;
return !(x<0 || x>=w || y<0 || y>=h);
}
상황에 따라 영역 X를 호출하기 전에 (이==e.target) 확인이 필요할 수 있습니다.내부(e).
fyi- 저는 dragLeave 이벤트가 하위 요소로 들어가 트리거되지 않았는지 확인하기 위해 dragLeave 핸들러 내부에서 이 접근 방식을 사용하고 있습니다.자신이 아직 부모 요소 안에 있는지 확인하지 않으면, 실수로 부모를 떠날 때만 의도된 조치를 취할 수 있습니다.
편집: 좋은 생각이지만 일관성이 충분하지 않습니다.아마도 약간의 수정이 있을 것입니다.
수다있니로 할 수 .jQuery만약 어떤 아이 디브가 특정한 클래스를 가지고 있다면.그런 다음 특정 div를 마우스로 가리킬 때 해당 클래스를 적용하면 마우스가 이 클래스를 넘었는지 테스트할 수 있습니다. 페이지에서 다른 요소를 마우스로 가리킬 때도 마찬가지입니다. 이런 식으로 코드를 훨씬 적게 입력하십시오.저는 이것을 사용했습니다. 팝업에서 div 사이에 공간이 있기 때문입니다. 팝업에서 벗어나면 팝업을 닫고 싶었을 뿐 팝업에서 마우스를 이동할 때는 그렇지 않습니다.그래서 저는 div 컨텐츠에 있는 마우스 오버 함수를 호출했는데(팝업이 끝났음), div 컨텐츠 위에 마우스를 올려놓고 팝업 밖에 있을 때만 닫기 함수를 트리거했습니다!
$(.팝업").마우스 오버(함수(e){$(이것).addClass("over");
});
$(.팝업").마우스 아웃(함수 e){$(이것)클래스 제거("over");
});
$("#mainContent").마우스 오버(함수 e){if (!$(".expanded"). has 클래스("over") {Drupal.dhtmlMenu.togleMenu($(.expanded"));}});
이것이 그것을 하는 가장 쉬운 방법일 것입니다!
function(oi)
{
if(!$(oi).is(':hover')){$(oi).fadeOut(100);}
}
을 사용하는 기술이 있습니다.matches API. 공급업체 접두사를 사용하여 IE9로 돌아가는 브라우저를 지원합니다.자세한 내용은 caniuse.com 의 match selector를 참조하십시오.
먼저 일치 항목을 만듭니다.다음과 같은 셀렉터 기능:
var matchesSelector = (function(ElementPrototype) {
var fn = ElementPrototype.matches ||
ElementPrototype.webkitMatchesSelector ||
ElementPrototype.mozMatchesSelector ||
ElementPrototype.msMatchesSelector;
return function(element, selector) {
return fn.call(element, selector);
};
})(Element.prototype);
그런 다음 호버를 감지하려면 다음과 같이 하십시오.
var mouseIsOver = matchesSelector(element, ':hover');
다른 질문에 답변을 드렸습니다. 필요한 모든 세부 정보는 다음과 같습니다.
jQuery를 사용하여 요소 위를 맴도는 IF 탐지(쓰기 시 99개의 업보 있음)
기본적으로 다음과 같은 작업을 수행할 수 있습니다.
var ishovered = oi.is(":hover");
이것은 다음 경우에만 작동합니다.oi단일 요소를 포함하는 jQuery 개체입니다.일치하는 요소가 여러 개 있는 경우 다음과 같이 각 요소에 적용해야 합니다.
var hoveredItem = !!$('ol>li').filter(function() { return $(this).is(":hover"); });
// not .filter(':hover'), as we can't apply :hover on multiple elements
이것은 jQuery 1.7부터 테스트되었습니다.
여기에 마우스가 요소 안에 있는지 확인할 수 있는 기능이 있습니다.당신이 해야 할 일은 마우스와 관련된 이벤트 객체를 라이브로 가질 수 있는 함수를 호출하는 것입니다.다음과 같은 것:
$("body").mousemove(function(event){
element_mouse_is_inside($("#mycontainer", event, true, {});
});
여기 github 또는 게시물 하단에서 소스 코드를 볼 수 있습니다.
https://github.com/mostafatalebi/ElementsLocator/blob/master/elements_locator.jquery.js
function element_mouse_is_inside (elementToBeChecked, mouseEvent, with_margin, offset_object)
{
if(!with_margin)
{
with_margin = false;
}
if(typeof offset_object !== 'object')
{
offset_object = {};
}
var elm_offset = elementToBeChecked.offset();
var element_width = elementToBeChecked.width();
element_width += parseInt(elementToBeChecked.css("padding-left").replace("px", ""));
element_width += parseInt(elementToBeChecked.css("padding-right").replace("px", ""));
var element_height = elementToBeChecked.height();
element_height += parseInt(elementToBeChecked.css("padding-top").replace("px", ""));
element_height += parseInt(elementToBeChecked.css("padding-bottom").replace("px", ""));
if( with_margin)
{
element_width += parseInt(elementToBeChecked.css("margin-left").replace("px", ""));
element_width += parseInt(elementToBeChecked.css("margin-right").replace("px", ""));
element_height += parseInt(elementToBeChecked.css("margin-top").replace("px", ""));
element_height += parseInt(elementToBeChecked.css("margin-bottom").replace("px", ""));
}
elm_offset.rightBorder = elm_offset.left+element_width;
elm_offset.bottomBorder = elm_offset.top+element_height;
if(offset_object.hasOwnProperty("top"))
{
elm_offset.top += parseInt(offset_object.top);
}
if(offset_object.hasOwnProperty("left"))
{
elm_offset.left += parseInt(offset_object.left);
}
if(offset_object.hasOwnProperty("bottom"))
{
elm_offset.bottomBorder += parseInt(offset_object.bottom);
}
if(offset_object.hasOwnProperty("right"))
{
elm_offset.rightBorder += parseInt(offset_object.right);
}
var mouseX = mouseEvent.pageX;
var mouseY = mouseEvent.pageY;
if( (mouseX > elm_offset.left && mouseX < elm_offset.rightBorder)
&& (mouseY > elm_offset.top && mouseY < elm_offset.bottomBorder) )
{
return true;
}
else
{
return false;
}
}
'Happytime harry'가 말한 것을 확장하여 .data() jquery 함수를 사용하여 시간 초과 ID를 저장해야 합니다.이를 통해 나중에 같은 요소에서 '마우스 입력'이 트리거될 때 시간 초과 ID를 매우 쉽게 검색할 수 있으므로 도구 설명이 사라지는 트리거를 제거할 수 있습니다.
jQuery의 마우스 입력 및 마우스 탈퇴 이벤트를 사용할 수 있습니다.마우스가 원하는 영역에 들어갈 때 플래그를 설정하고 영역에서 나갈 때 플래그를 해제할 수 있습니다.
이 항목의 아이디어를 결합하여 하위 메뉴를 표시/숨기기에 유용한 다음과 같은 방법을 생각해 냈습니다.
$("#menu_item_a").mouseenter(function(){
clearTimeout($(this).data('timeoutId'));
$("#submenu_a").fadeIn("fast");
}).mouseleave(function(){
var menu_item = $(this);
var timeoutId = setTimeout(function(){
if($('#submenu_a').is(':hover'))
{
clearTimeout(menu_item.data('timeoutId'));
}
else
{
$("#submenu_a").fadeOut("fast");
}
}, 650);
menu_item.data('timeoutId', timeoutId);
});
$("#submenu_a").mouseleave(function(){
$(this).fadeOut("fast");
});
저한테는 효과가 있는 것 같아요.이것이 누군가에게 도움이 되기를 바랍니다.
편집: 이제 이 접근 방식이 IE에서 제대로 작동하지 않습니다.
저는 위의 어떤 제안도 사용할 수 없었습니다.
솔루션을 선호하는 이유
이 방법은 사용자가 선택한 언제든지 마우스가 요소 위에 있는지 확인합니다.
마우스 입력 및 :hover는 멋지지만 마우스를 이동한 경우에만 트리거를 입력합니다. 요소가 마우스 아래로 이동할 때는 그렇지 않습니다.
:커피는 꽤 달콤하지만...IE
그래서 저는 이렇게 합니다.
No 1. mouse x, y 위치를 이동할 때마다 필요할 때마다 저장합니다.
아니요 2. 마우스가 쿼리 작업과 일치하는 요소 위에 있는지 확인합니다...like 트리거 마우스 이벤트 입력
// define mouse x, y variables so they are traced all the time
var mx = 0; // mouse X position
var my = 0; // mouse Y position
// update mouse x, y coordinates every time user moves the mouse
$(document).mousemove(function(e){
mx = e.pageX;
my = e.pageY;
});
// check is mouse is over an element at any time You need (wrap it in function if You need to)
$("#my_element").each(function(){
boxX = $(this).offset().left;
boxY = $(this).offset().top;
boxW = $(this).innerWidth();
boxH = $(this).innerHeight();
if ((boxX <= mx) &&
(boxX + 1000 >= mx) &&
(boxY <= my) &&
(boxY + boxH >= my))
{
// mouse is over it so you can for example trigger a mouseenter event
$(this).trigger("mouseenter");
}
});
위에서 인기 있고 도움이 되는 아서 골드스미스의 답변에 대한 메모입니다.IE에서 한 요소에서 다른 요소로 마우스를 이동하는 경우(최소한 IE 9까지) 새 요소의 배경이 투명한 경우(기본값) 마우스가 제대로 작동하지 않을 수 있습니다.저의 해결 방법은 새로운 요소에 투명한 배경 이미지를 부여하는 것이었습니다.
$(document).hover(function(e) {
alert(e.type === 'mouseenter' ? 'enter' : 'leave');
});
피들
사용하다evt.originalEvent.composedPath()
MouseEvent에는 의배을제다니합의 있습니다.HTMLElement마우스가 최근에 상호 작용했습니다., 장깥상항쪽)입니다.Window).
이벤트composedPath()아래의 예:
이 배열에서 클릭 가능한 요소가 있는지 확인하면 특정 요소 위에 마우스가 있는지 확인할 수 있습니다.
$(window).on("mouseup", onMouseUp);
const $someButton = $("a.yourButton");
function onMouseUp(evt) {
const path = evt.originalEvent.composedPath();
if(path.indexOf($someButton[0]) !== -1){
// released mouse over button
}else{
// did not release mouse over button
}
}
브라우저 마우스 오버/이벤트 입력/이동 또는 호버 상태에 의존하지 않는 답변이 필요한 저와 같은 사람들을 위해 사용됩니다.저는 홈페이지 슬라이더에 상황이 있었습니다. 왼쪽 및 오른쪽 슬라이드 클릭 영역이 배너의 CTA 버튼과 겹칠 수 있습니다(또는 때로는 완전히 덮을 수 있습니다). 이는 모든 이전 방법을 쓸모없게 만듭니다(브라우저는 z-지수가 가장 높은 요소에 대한 이벤트만 보고함).저는 클릭이 버튼 위에 있을 때 클릭 이벤트가 배너 기능보다 버튼에 더 신경을 쓰게 하는 일을 맡았습니다.
전체 솔루션은 다음과 같습니다.
jQuery('.carousel-control-prev').on('click.testClick', function(e) {
var bannerButtons = jQuery('.banner-content a');
for (var i = 0; i < bannerButtons.length; i++) {
if (isMouseOver(bannerButtons.eq(i), e)) {
e.preventDefault();
e.stopPropagation();
bannerButtons[i].click();
}
}
});
function isMouseOver($el, e) {
if ($el.is(':visible')) {
var offset = $el.offset();
var x = (e.pageX - offset.left);
var y = (e.pageY - offset.top);
if (x > 0 && x < $el.outerWidth() && y > 0 && y < $el.outerHeight()) {
return true;
}
}
return false;
}
이것은 아마도 조금 더 많은 작업과 테스트를 통해 가능하겠지만, 지금은 제가 필요로 하는 것을 할 수 있습니다. 이 경우에는 배너 왼쪽 클릭을 가로채서 마우스가 CTA 버튼 위에 있는지 확인하고, 마우스가 있으면 배너 탐색 대신 CTA를 클릭합니다.
더 나은 해결책은 배너 영역을 재설계하여 이러한 일이 전혀 발생하지 않도록 하는 것이라는 것을 충분히 이해하지만, 디자인은 제가 통제할 수 있는 범위 밖에 있습니다.
사용할 수 있습니다.is(':visible');jquery에서 $(.item:hover')에 대해서도 Jquery에서 작동하고 있습니다.
이것은 htm 코드 스니펫입니다.
<li class="item-109 deeper parent">
<a class="root" href="/Comsopolis/index.php/matiers"><span>Matiers</span></a>
<ul>
<li class="item-110 noAff">
<a class=" item sousMenu" href="/Comsopolis/index.php/matiers/tsdi">
<span>Tsdi</span>
</a>
</li>
<li class="item-111 noAff">
<a class="item" href="/Comsopolis/index.php/matiers/reseaux">
<span>Réseaux</span>
</a>
</li>
</ul>
</li>
JS 코드는 다음과 같습니다.
$('.menutop > li').hover(function() {//,.menutop li ul
$(this).find('ul').show('fast');
},function() {
if($(this).find('ul').is(':hover'))
$(this).hide('fast');
});
$('.root + ul').mouseleave(function() {
if($(this).is(':visible'))
$(this).hide('fast');
});
이것이 내가 말한 것입니다 :)
언급URL : https://stackoverflow.com/questions/1273566/how-do-i-check-if-the-mouse-is-over-an-element-in-jquery
'programing' 카테고리의 다른 글
| Android Studio 오류 "설치된 빌드 도구 버전 31.0.0이 손상되었습니다." (0) | 2023.06.03 |
|---|---|
| Angular 2의 DatePipe에서 로케일을 설정하는 방법은 무엇입니까? (0) | 2023.05.29 |
| postgresql에서 db에 대한 사용자를 생성하는 방법은 무엇입니까? (0) | 2023.05.29 |
| Xcode 운동장이 '달리는 운동장' 또는 '시뮬레이터 실행'에 걸려 코드가 실행되지 않습니다. 어떻게 해야 합니까? (0) | 2023.05.29 |
| 명령줄에서 node.js 프로그램 중지 (0) | 2023.05.29 |