เป็นไปได้ไหมที่จะใช้ jQuery .on and hover?

ฉันมี<ul>ที่บรรจุด้วย javascript หลังจากโหลดหน้าแรก ฉันกำลังใช้.bindด้วยและmouseovermouseout

โครงการเพิ่งอัพเดตเป็น jQuery 1.7 ดังนั้นฉันจึงมีตัวเลือกให้ใช้.onแต่ฉันไม่สามารถใช้งานhoverได้ มันเป็นไปได้ที่จะใช้.onกับhover?

แก้ไข : องค์ประกอบที่ฉันผูกพันจะถูกโหลดด้วยจาวาสคริปต์หลังจากโหลดเอกสาร นั่นเป็นเหตุผลที่ผมใช้และไม่เพียงonhover

( ดูการแก้ไขล่าสุดในคำตอบนี้หากคุณต้องการใช้.on()กับองค์ประกอบที่มี JavaScript )

ใช้สิ่งนี้สำหรับองค์ประกอบที่ไม่ได้บรรจุโดยใช้ JavaScript:

$(".selector").on("mouseover", function () {
    //stuff to do on mouseover
});

.hover()มีตัวจัดการมันเอง: http://api.jquery.com/hover/

หากคุณต้องการทำสิ่งต่าง ๆ เชื่อมโยงพวกเขาใน.on()ตัวจัดการดังนี้

$(".selector").on({
    mouseenter: function () {
        //stuff to do on mouse enter
    },
    mouseleave: function () {
        //stuff to do on mouse leave
    }
});

ตามคำตอบที่ให้ไว้ด้านล่างคุณสามารถใช้hoverกับ.on()แต่:

แม้ว่าจะไม่แนะนำให้ใช้รหัสใหม่อย่างรุนแรง แต่คุณอาจเห็นชื่อ "hover" หลอกใช้เป็นชวเลขสำหรับสตริง "mouseenter mouseleave" มันแนบตัวจัดการเหตุการณ์เดียวสำหรับสองเหตุการณ์เหล่านั้นและตัวจัดการต้องตรวจสอบ event.type เพื่อตรวจสอบว่าเหตุการณ์เป็น mouseenter หรือ mouseleave อย่าสับสน "pseudo-event-name" ด้วยวิธี. 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()รหัสในเวลานั้น

แก้ไข 11 ธันวาคม 2012

คำตอบใหม่บางส่วนระบุไว้ด้านล่างโดยละเอียดว่า.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

รหัสนี้จะทำงานสำหรับองค์ประกอบที่มี JavaScript หลังจาก.load()เหตุการณ์เกิดขึ้น เพียงเปลี่ยนอาร์กิวเมนต์ของคุณเป็นตัวเลือกที่เหมาะสม

วิธีแก้ปัญหาเหล่านี้ไม่เหมาะกับฉันเมื่อทำการวางเมาส์บนวัตถุที่สร้างขึ้นหลังจากเอกสารถูกโหลดตามการร้องขอคำถาม ฉันรู้ว่าคำถามนี้เก่า แต่ฉันมีทางออกสำหรับผู้ที่ยังคงมองหา:

$("#container").on('mouseenter', '.selector', function() {
    //do something
});
$("#container").on('mouseleave', '.selector', function() {
    //do something
});

สิ่งนี้จะผูกฟังก์ชั่นกับตัวเลือกเพื่อให้วัตถุที่มีตัวเลือกนี้ทำหลังจากเอกสารพร้อมจะยังคงสามารถเรียกใช้ได้

ฉันไม่แน่ใจว่าจาวาสคริปต์ที่เหลือของคุณเป็นอย่างไรดังนั้นฉันจะไม่สามารถบอกได้ว่ามีสัญญาณรบกวนหรือไม่ แต่ทำงานได้ดีเป็นกับเหตุการณ์.hover().on()

$("#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/

ฟังก์ชั่นโฮเวอร์ jQuery ให้ฟังก์ชันการใช้เมาส์โอเวอร์และเม้าส์

$ (เลือก) .hover (inFunction, outFunction);

$(".item-image").hover(function () {
    // mouseover event codes...
}, function () {
    // mouseout event codes...
});

ที่มา: http://www.w3schools.com/jquery/event_hover.asp

เพิ่งท่องจากเว็บและรู้สึกว่าฉันสามารถมีส่วนร่วมได้ ฉันสังเกตเห็นว่าด้วยรหัสข้างต้นโพสต์โดย @calethebrewer สามารถทำให้หลายสายผ่านตัวเลือกและพฤติกรรมที่ไม่คาดคิดเช่น: -

$(document).on('mouseover', '.selector', function() {
   //do something
});
$(document).on('mouseout', '.selector', function() {
   //do something
});

ซอนี้http://jsfiddle.net/TWskH/12/ illustraits จุดของฉัน เมื่อองค์ประกอบภาพเคลื่อนไหวเช่นในปลั๊กอินฉันพบว่าทริกเกอร์หลายรายการเหล่านี้ส่งผลให้เกิดพฤติกรรมที่ไม่ตั้งใจซึ่งอาจส่งผลให้เกิดภาพเคลื่อนไหวหรือรหัสที่เรียกว่าเกินความจำเป็น

คำแนะนำของฉันคือแทนที่ด้วย mouseenter / mouseleave: -

$(document).on('mouseenter', '.selector', function() {
   //do something
});
$(document).on('mouseleave', '.selector', function() {
   //do something
});

แม้ว่าสิ่งนี้จะป้องกันไม่ให้มีการเรียกภาพเคลื่อนไหวของฉันหลายครั้ง แต่ในที่สุดฉันก็ใช้ mouseover / mouseleave ตามที่ฉันต้องการเพื่อพิจารณาว่าเมื่อใดที่ลูกของผู้ปกครองถูกวางตัวอยู่เหนือ

คุณสามารถใช้.on()กับhoverโดยทำสิ่งที่ส่วนหมายเหตุเพิ่มเติมพูดว่า:

แม้ว่าจะไม่แนะนำให้ใช้รหัสใหม่อย่างรุนแรง แต่คุณอาจเห็นชื่อ "hover" หลอกใช้เป็นชวเลขสำหรับสตริง "mouseenter mouseleave" มันแนบตัวจัดการเหตุการณ์เดียวสำหรับสองเหตุการณ์เหล่านั้นและตัวจัดการต้องตรวจสอบ event.type เพื่อตรวจสอบว่าเหตุการณ์เป็น mouseenter หรือ mouseleave อย่าสับสน "pseudo-event-name" ด้วยวิธี. hover () ซึ่งยอมรับหนึ่งหรือสองฟังก์ชั่น

ที่จะทำต่อไปนี้:

$("#foo").on("hover", function(e) {

    if (e.type === "mouseenter") { console.log("enter"); }
    else if (e.type === "mouseleave") { console.log("leave"); }

});

แก้ไข (หมายเหตุสำหรับผู้ใช้ jQuery 1.8+):

เลิกใช้ใน jQuery 1.8, ถูกลบใน 1.9: ชื่อ "hover" ใช้เป็นชวเลขสำหรับสตริง "mouseenter mouseleave" มันแนบตัวจัดการเหตุการณ์เดียวสำหรับสองเหตุการณ์เหล่านั้นและตัวจัดการต้องตรวจสอบ event.type เพื่อตรวจสอบว่าเหตุการณ์เป็น mouseenter หรือ mouseleave อย่าสับสน "pseudo-event-name" ด้วยวิธี. hover () ซึ่งยอมรับหนึ่งหรือสองฟังก์ชั่น

$("#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เท่ากับ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