jQuery.on 및 hover를 사용할 수 있습니까?
나는 있습니다<ul>
초기 페이지 로드 후 Javascript로 채워집니다.현재사중입다니용다를 사용하고 ..bind
와 함께mouseover
그리고.mouseout
.
프로젝트가 jQuery 1.7로 업데이트되었으므로 사용할 수 있습니다..on
하지만 나는 그것을 작동시킬 수 없는 것 같습니다.hover
?를 사용할 수 있습니까?.on
와 함께hover
?
EDIT: 제가 바인딩하는 요소는 문서가 로드된 후 Javascript로 로드됩니다.그래서 제가 사용하는 겁니다.on
만아라니가 .hover
.
(JavaScript로 채워진 요소와 함께 사용해야 하는 경우 이 답변의 마지막 편집을 참조하십시오.)
JavaScript를 사용하여 채워지지 않은 요소의 경우 다음을 사용:
$(".selector").on("mouseover", function () {
//stuff to do on mouseover
});
.hover()
자체 핸들러가 있음: http://api.jquery.com/hover/
여러 가지 작업을 수행하려면 다음과 같이 체인으로 연결합니다..on()
so 런그급:
$(".selector").on({
mouseenter: function () {
//stuff to do on mouse enter
},
mouseleave: function () {
//stuff to do on mouse leave
}
});
은 아래제공답따다사수있용다습니할을음라변에된다를 사용할 수 .hover
와 함께.on()
그러나:
새 코드를 사용하지 않는 것이 좋으나 "mouse enter mouse leave" 문자열의 단축형으로 유사 이벤트 이름 "hover"가 사용될 수 있습니다.이 두 이벤트에 대해 단일 이벤트 핸들러를 연결하며, 이 핸들러는 event.type을 검사하여 이벤트가 mouseenter인지 mouse leave인지 확인해야 합니다."hover" 유사 이벤트 이름을 하나 또는 두 개의 함수를 허용하는 .hover() 메서드와 혼동하지 마십시오.
또한, 사용하는 것에 대한 성능상의 이점은 없으며 단순히 사용하는 것보다 부피가 더 큽니다.mouseenter
또는mouseleave
제가 제공한 답변은 코드가 적게 필요하며 이러한 것을 달성하기 위한 적절한 방법입니다.
편집
이 질문에 대한 답변이 나온 지가 꽤 됐는데 어느 정도 설득력을 얻은 것 같습니다.위의 코드는 여전히 유효하지만, 저는 제 원래 답변에 무언가를 추가하고 싶었습니다.
사용하는 것을 선호하는 동안mouseenter
그리고.mouseleave
일이 있는지 하는 데 .)와 함께 사용합니다.on()
그것은 다음을 쓰는 것과 같습니다.hover()
$(".selector").hover(function () {
//stuff to do on mouse enter
},
function () {
//stuff to do on mouse leave
});
원래의 질문은 어떻게 그들이 적절하게 사용할 수 있는지를 물었기 때문입니다.on()
와 함께hover()
의 사용법을 수정할 것이라고 생각했습니다.on()
그리고 그것을 추가할 필요가 없다고 생각했습니다.hover()
당시의 암호
2012년 12월 11일 편집
아래에 제공된 몇 가지 새로운 답변은 방법을 자세히 설명합니다..on()
다음과 같은 경우에 작동해야 합니다.div
해당 항목은 JavaScript를 사용하여 채워집니다.예를 들어, 다음 값을 입력한다고 가정합니다.div
jQuery 사용 ».load()
이벤트, 다음과 같은 경우:
(function ($) {
//append div to document body
$('<div class="selector">Test</div>').appendTo(document.body);
}(jQuery));
의 코드는 음에대위 코드한입니다..on()
서려고 하지 않았습니다.대신 코드를 다음과 같이 약간 수정해야 합니다.
$(document).on({
mouseenter: function () {
//stuff to do on mouse enter
},
mouseleave: function () {
//stuff to do on mouse leave
}
}, ".selector"); //pass the element as an argument to .on
▁a▁populatedscript▁this▁java 뒤에 자바스크립트로 채워진 요소에 대해 합니다..load()
사건이 발생했습니다.인수를 적절한 선택기로 변경하십시오.
문서가 질문 요청으로 로드된 후 생성된 개체를 마우스로 이동하거나 마우스를 뗄 때는 이러한 솔루션 중 어떤 것도 작동하지 않았습니다.저는 이 질문이 오래된 것이라는 것을 알지만, 여전히 찾고 있는 사람들을 위한 해결책이 있습니다.
$("#container").on('mouseenter', '.selector', function() {
//do something
});
$("#container").on('mouseleave', '.selector', function() {
//do something
});
이렇게 하면 문서가 준비된 후에도 이 선택기를 가진 개체가 계속 호출할 수 있도록 기능이 선택기에 바인딩됩니다.
저는 당신의 자바스크립트의 나머지 부분이 어떻게 생겼는지 잘 모르기 때문에 간섭이 있는지 알 수 없습니다.하지만 이벤트로 사용할 수 있습니다.
$("#foo").on("hover", function() {
// disco
});
이벤트를 활용하려면 이벤트에서 반환된 개체를 사용합니다.
$("#foo").on("hover", function(e) {
if(e.type == "mouseenter") {
console.log("over");
}
else if (e.type == "mouseleave") {
console.log("out");
}
});
그냥 웹서핑을 해서 제가 기여할 수 있다고 느꼈습니다.나는 @calle이 게시한 위의 코드를 통해 양조자가 셀렉터를 통해 여러 번 호출하고 예기치 않은 동작을 할 수 있다는 것을 알게 되었습니다. 예를 들어 다음과 같습니다.
$(document).on('mouseover', '.selector', function() {
//do something
});
$(document).on('mouseout', '.selector', function() {
//do something
});
이 바이올린 http://jsfiddle.net/TWskH/12/ 은 제 요점을 설명합니다.플러그인과 같은 요소를 애니메이션화할 때 이러한 여러 트리거로 인해 애니메이션이나 코드가 필요 이상으로 호출될 수 있는 의도하지 않은 동작이 발생한다는 것을 알게 되었습니다.
제 제안은 마우스 엔터/마우스 탈퇴로 간단히 대체하는 것입니다.
$(document).on('mouseenter', '.selector', function() {
//do something
});
$(document).on('mouseleave', '.selector', function() {
//do something
});
이로 인해 애니메이션의 여러 인스턴스를 호출할 수 없었지만, 부모의 자녀가 언제 마우스 오버를 하는지 결정해야 했기 때문에 결국 마우스 오버/마우스 휴가를 사용했습니다.
jQuery 호버 기능은 마우스 오버 및 마우스 아웃 기능을 제공합니다.
달러(약)호버(Function, out Function);
$(".item-image").hover(function () {
// mouseover event codes...
}, function () {
// mouseout event codes...
});
출처: http://www.w3schools.com/jquery/event_hover.asp
$("#MyTableData").on({
mouseenter: function(){
//stuff to do on mouse enter
$(this).css({'color':'red'});
},
mouseleave: function () {
//stuff to do on mouse leave
$(this).css({'color':'blue'});
}},'tr');
와 함께 사용할 수 있습니다.hover
추가 참고 섹션에 표시된 작업을 수행합니다.
새 코드를 사용하지 않는 것이 좋으나 "mouse enter mouse leave" 문자열의 단축형으로 유사 이벤트 이름 "hover"가 사용될 수 있습니다.이 두 이벤트에 대해 단일 이벤트 핸들러를 연결하며, 이 핸들러는 event.type을 검사하여 이벤트가 mouseenter인지 mouse leave인지 확인해야 합니다."hover" 유사 이벤트 이름을 하나 또는 두 개의 함수를 허용하는 .hover() 메서드와 혼동하지 마십시오.
이는 다음과 같은 작업을 의미합니다.
$("#foo").on("hover", function(e) {
if (e.type === "mouseenter") { console.log("enter"); }
else if (e.type === "mouseleave") { console.log("leave"); }
});
EDIT(jQuery 1.8+ 사용자 참고):
jQuery 1.8에서 더 이상 사용되지 않으며, 1.9에서 제거됨: "hover"라는 이름은 "mouseenter mouse leave" 문자열의 단축형으로 사용됩니다.이 두 이벤트에 대해 단일 이벤트 핸들러를 연결하며, 이 핸들러는 event.type을 검사하여 이벤트가 mouseenter인지 mouse leave인지 확인해야 합니다."hover" 유사 이벤트 이름을 하나 또는 두 개의 함수를 허용하는 .hover() 메서드와 혼동하지 마십시오.
하나 이상의 이벤트 유형을 공백으로 구분하여 제공할 수 있습니다.
그렇게hover
동등한mouseenter mouseleave
.
이것이 제 제안입니다.
$("#foo").on("mouseenter mouseleave", function() {
// do some stuff
});
다른 이벤트의 조건으로 필요한 경우 다음과 같이 해결했습니다.
$('.classname').hover(
function(){$(this).data('hover',true);},
function(){$(this).data('hover',false);}
);
다른 경우에는 쉽게 사용할 수 있습니다.
if ($(this).data('hover')){
//...
}
(일부는 사용함)is(':hover')
이 문제를 해결하기 위해.그러나 (아직) 유효한 jQuery 선택기가 아니며 일부 호환 브라우저에서 작동하지 않습니다.)
jQuery 플러그인 hoverIntent http://cherne.net/brian/resources/jquery.hoverIntent.html 은 여기에 나열된 단순한 접근 방식보다 훨씬 더 멀리 있습니다.이러한 기능은 확실히 작동하지만 사용자가 기대하는 방식으로 반드시 동작하지는 않을 수 있습니다.
hoverIntent를 사용해야 하는 가장 강력한 이유는 시간 초과 기능입니다.사용자가 원하는 항목을 클릭하기 전에 마우스를 오른쪽이나 왼쪽으로 약간 끌어서 메뉴가 닫히지 않도록 하는 등의 작업을 수행할 수 있습니다.또한 탄막에서 호버 이벤트를 활성화하지 않고 집중 호버링을 대기하는 기능도 제공합니다.
사용 예:
var config = {
sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)
interval: 200, // number = milliseconds for onMouseOver polling interval
over: makeTall, // function = onMouseOver callback (REQUIRED)
timeout: 500, // number = milliseconds delay before onMouseOut
out: makeShort // function = onMouseOut callback (REQUIRED)
};
$("#demo3 li").hoverIntent( config )
이에 대한 자세한 설명은 https://stackoverflow.com/a/1089381/37055 에서 확인할 수 있습니다.
언급URL : https://stackoverflow.com/questions/9827095/is-it-possible-to-use-jquery-on-and-hover
'source' 카테고리의 다른 글
익명 클래스의 일반 목록 (0) | 2023.05.14 |
---|---|
Xcode 프로젝트 및 관련 폴더 복제 및 이름 바꾸기 (0) | 2023.05.14 |
원격으로 Maria에 연결할 수 없음DB (0) | 2023.05.14 |
asp.net 을 통해 Office Word 개체 모델에 액세스하면 "80070005 액세스가 거부되었습니다."라는 오류로 인해 오류가 발생합니다. (0) | 2023.05.14 |
WPF에서 폭을 100%로 설정하는 방법 (0) | 2023.05.14 |