ฉันจะเลิกผูก "โฮเวอร์" ใน jQuery ได้อย่างไร

ฉันจะเลิกผูก "โฮเวอร์" ใน jQuery ได้อย่างไร

สิ่งนี้ใช้ไม่ได้:

$(this).unbind('hover');

$(this).unbind('mouseenter').unbind('mouseleave')

หรือมากกว่านั้นอย่างรวบรัด (ขอบคุณ@Chad Grant ):

$(this).unbind('mouseenter mouseleave')

จริงๆแล้วเอกสาร jQueryมีวิธีการที่ง่ายกว่าตัวอย่างที่ถูกล่ามโซ่ที่แสดงไว้ด้านบน (แม้ว่าจะใช้งานได้ดีก็ตาม):

$("#myElement").unbind('mouseenter mouseleave');

ใน jQuery 1.7 คุณยังสามารถใช้$.on()และ$.off()สำหรับการเชื่อมโยงเหตุการณ์ดังนั้นในการคลายการเชื่อมโยงเหตุการณ์โฮเวอร์คุณจะใช้วิธีที่ง่ายและเป็นระเบียบมากขึ้น:

$('#myElement').off('hover');

pseudo-event-name "hover" ใช้เป็นชวเลขสำหรับ "mouseenter mouseleave" แต่ได้รับการจัดการที่แตกต่างกันใน jQuery เวอร์ชันก่อนหน้า กำหนดให้คุณต้องลบชื่อเหตุการณ์ตามตัวอักษรแต่ละชื่ออย่างชัดเจน การใช้$.off()ตอนนี้ช่วยให้คุณวางเมาส์ทั้งสองเหตุการณ์โดยใช้ชวเลขเดียวกัน

แก้ไข 2016:

ยังคงเป็นคำถามยอดนิยมดังนั้นจึงควรดึงดูดความสนใจไปที่ประเด็นของ @ Dennis98ในความคิดเห็นด้านล่างว่าใน jQuery 1.9+ เหตุการณ์ "hover" ถูกเลิกใช้เพื่อสนับสนุนการเรียก "mouseenter mouseleave" มาตรฐาน ดังนั้นการประกาศการผูกเหตุการณ์ของคุณควรมีลักษณะดังนี้:

$('#myElement').off('mouseenter mouseleave');

เลิกผูกmouseenterและmouseleaveเหตุการณ์ทีละรายการหรือเลิกผูกเหตุการณ์ทั้งหมดในองค์ประกอบ

$(this).unbind('mouseenter').unbind('mouseleave');

หรือ

$(this).unbind();  // assuming you have no other handlers you want to keep

unbind () ใช้ไม่ได้กับเหตุการณ์แบบอินไลน์ที่เข้ารหัส

ตัวอย่างเช่นหากคุณต้องการยกเลิกการเชื่อมโยงเหตุการณ์เมาส์โอเวอร์ <div id="some_div" onmouseover="do_something();">ฉันพบว่า$('#some_div').attr('onmouseover','')เป็นวิธีที่รวดเร็วและสกปรกในการบรรลุเป้าหมาย

ทางออกก็คือ.die ()สำหรับเหตุการณ์ที่ที่แนบมาพร้อมกับ.live ()

เช่น:

// attach click event for <a> tags
$('a').live('click', function(){});

// deattach click event from <a> tags
$('a').die('click');

คุณสามารถค้นหาการอ้างอิงที่ดีได้ที่นี่: การสำรวจ jQuery .live () และ .die ()

(ขออภัยสำหรับภาษาอังกฤษของฉัน: ">)

โฮเวอร์ทั้งหมดที่ทำอยู่เบื้องหลังจะมีผลผูกพันกับคุณสมบัติเมาส์โอเวอร์และเมาส์เอาท์ ฉันจะผูกและคลายการทำงานของคุณจากเหตุการณ์เหล่านั้นทีละรายการ

ตัวอย่างเช่นสมมติว่าคุณมี html ต่อไปนี้:

<a href="#" class="myLink">Link</a>

jQuery ของคุณจะเป็น:

$(document).ready(function() {

  function mouseOver()
  {
    $(this).css('color', 'red');
  }
  function mouseOut()
  {
    $(this).css('color', 'blue');
  }

  // either of these might work
  $('.myLink').hover(mouseOver, mouseOut); 
  $('.myLink').mouseover(mouseOver).mouseout(mouseOut); 
  // otherwise use this
  $('.myLink').bind('mouseover', mouseOver).bind('mouseout', mouseOut);


  // then to unbind
  $('.myLink').click(function(e) {
    e.preventDefault();
    $('.myLink').unbind('mouseover', mouseOver).unbind('mouseout', mouseOut);
  });

});

คุณสามารถลบตัวจัดการเหตุการณ์เฉพาะที่แนบมาโดยonใช้off

$("#ID").on ("eventName", additionalCss, handlerFunction);

// to remove the specific handler
$("#ID").off ("eventName", additionalCss, handlerFunction);

เมื่อใช้สิ่งนี้คุณจะลบเฉพาะhandlerFunction
แนวทางปฏิบัติที่ดีอีกประการหนึ่งคือการตั้งค่า nameSpace สำหรับเหตุการณ์ที่แนบมาหลายเหตุการณ์

$("#ID").on ("eventName1.nameSpace", additionalCss, handlerFunction1);
$("#ID").on ("eventName2.nameSpace", additionalCss, handlerFunction2);
// ...
$("#ID").on ("eventNameN.nameSpace", additionalCss, handlerFunctionN);

// and to remove handlerFunction from 1 to N, just use this
$("#ID").off(".nameSpace");

ฉันพบว่ามันใช้งานได้เป็นอาร์กิวเมนต์ที่สอง (ฟังก์ชัน) ถึง .hover ()

$('#yourId').hover(
    function(){
        // Your code goes here
    },
    function(){
        $(this).unbind()
    }
});

ฟังก์ชันแรก (อาร์กิวเมนต์ถึง. hover ()) คือการวางเมาส์เหนือและจะรันโค้ดของคุณ อาร์กิวเมนต์ที่สองคือ mouseout ซึ่งจะยกเลิกการเชื่อมโยงเหตุการณ์โฮเวอร์จาก #yourId รหัสของคุณจะถูกเรียกใช้งานเพียงครั้งเดียว