โซลูชันที่ปรับปรุงเพิ่มเติม
ก่อนอื่นฉันใช้แนวทางของ Rich Bradshawแต่แล้วปัญหาก็เริ่มปรากฏขึ้น ด้วยการทำe.preventDefault ()ในเหตุการณ์'touchstart'หน้าจะไม่เลื่อนอีกต่อไปและการกดแบบยาวจะไม่สามารถเปิดเมนูตัวเลือกหรือดับเบิลคลิกซูมก็ไม่สามารถดำเนินการให้เสร็จสิ้นได้
วิธีการแก้ปัญหาอาจจะค้นหาออกที่เหตุการณ์จะถูกเรียกและเพียงe.preventDefault ()ในภายหลังหนึ่ง'touchend' เนื่องจาก'touchmove'ของ scroll มาก่อน'touchend'มันจะยังคงอยู่ตามค่าเริ่มต้นและ'click'ก็จะถูกป้องกันเช่นกันเนื่องจากมันมาจากคำตามหลังในห่วงโซ่เหตุการณ์ที่ใช้กับมือถือดังนี้:
// Binding to the '.static_parent' ensuring dynamic ajaxified content
$('.static_parent').on('touchstart touchend', '.link', function (e) {
// If event is 'touchend' then...
if (e.type == 'touchend') {
// Ensuring we event prevent default in all major browsers
e.preventDefault ? e.preventDefault() : e.returnValue = false;
}
// Add class responsible for :hover effect
$(this).toggleClass('hover_effect');
});
แต่เมื่อเมนูตัวเลือกปรากฏขึ้นมันจะไม่ยิง'การสัมผัส' ที่รับผิดชอบในการสลับชั้นเรียนอีกต่อไปและในครั้งต่อไปพฤติกรรมการวางเมาส์จะเป็นไปในทางอื่นโดยสิ้นเชิง
จากนั้นวิธีแก้ปัญหาจะเป็นอีกครั้งโดยมีเงื่อนไขว่าเราอยู่ในเหตุการณ์ใดหรือเพียงแค่ทำสิ่งที่แยกจากกันและใช้addClass ()และremoveClass ()ตามลำดับใน'touchstart'และ'touchend'เพื่อให้แน่ใจว่ามันเริ่มต้นและสิ้นสุดโดยเสมอ ตามลำดับการเพิ่มและลบแทนที่จะตัดสินใจตามเงื่อนไข ในการดำเนินการให้เสร็จสิ้นเราจะผูกการเรียกกลับการลบเข้ากับประเภทเหตุการณ์'โฟกัสเอาต์'โดยยังคงรับผิดชอบในการล้างคลาสโฮเวอร์ของลิงก์ใด ๆ ที่อาจยังคงอยู่และไม่กลับมาเยี่ยมชมอีกเช่น:
$('.static_parent').on('touchstart', '.link', function (e) {
$(this).addClass('hover_effect');
});
$('.static_parent').on('touchend focusout', '.link', function (e) {
// Think double click zoom still fails here
e.preventDefault ? e.preventDefault() : e.returnValue = false;
$(this).removeClass('hover_effect');
});
ข้อควรระวัง:ข้อบกพร่องบางอย่างยังคงเกิดขึ้นในสองโซลูชันก่อนหน้านี้และคิดว่า (ยังไม่ได้ทดสอบ) การซูมดับเบิลคลิกก็ยังล้มเหลวเช่นกัน
เป็นระเบียบเรียบร้อยและหวังว่าจะไม่มีข้อผิดพลาด (ไม่ใช่ :)) โซลูชัน Javascript
ตอนนี้เป็นเวลาวินาทีที่สะอาดกว่าเป็นระเบียบและตอบสนองเพียงแค่ใช้จาวาสคริปต์ (ไม่มีการผสมผสานระหว่าง. hover class และ pseudo: hover) และจากที่ที่คุณสามารถเรียกพฤติกรรม ajax ของคุณได้โดยตรงบนเหตุการณ์'click'สากล (มือถือและเดสก์ท็อป) ฉันพบคำถามที่ตอบได้ค่อนข้างดีซึ่งในที่สุดฉันก็เข้าใจว่าฉันสามารถผสมผสานเหตุการณ์การสัมผัสและเมาส์เข้าด้วยกันได้อย่างไรโดยไม่มีการเรียกกลับหลายเหตุการณ์อย่างหลีกเลี่ยงไม่ได้ที่จะเปลี่ยนเหตุการณ์ของกันและกันในห่วงโซ่เหตุการณ์ วิธีการมีดังนี้
$('.static_parent').on('touchstart mouseenter', '.link', function (e) {
$(this).addClass('hover_effect');
});
$('.static_parent').on('mouseleave touchmove click', '.link', function (e) {
$(this).removeClass('hover_effect');
// As it's the chain's last event we only prevent it from making HTTP request
if (e.type == 'click') {
e.preventDefault ? e.preventDefault() : e.returnValue = false;
// Ajax behavior here!
}
});