jQuery.on 및 hover를 사용할 수 있습니까?

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를 사용하여 채워집니다.예를 들어, 다음 값을 입력한다고 가정합니다.divjQuery 사용 ».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");
  }
});

http://jsfiddle.net/hmUPP/2/

그냥 웹서핑을 해서 제가 기여할 수 있다고 느꼈습니다.나는 @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