เป็นไปได้หรือไม่ที่จะบังคับให้เพิกเฉยต่อ: hover pseudoclass สำหรับผู้ใช้ iPhone / iPad

Question 1

ฉันมีเมนู css บนไซต์ของฉันที่ขยายด้วย:hover(ไม่มี js)

วิธีนี้ใช้งานได้ในลักษณะกึ่งเสียบน iDevices เช่นการแตะจะเปิดใช้งาน:hoverกฎและขยายเมนู แต่การแตะที่อื่นจะไม่ลบไฟล์:hover. นอกจากนี้หากมีลิงก์ภายในองค์ประกอบที่เป็น:hover'ed คุณต้องแตะสองครั้งเพื่อเปิดใช้งานลิงก์ (ทริกเกอร์การแตะครั้งแรก:hover, การแตะครั้งที่สองที่เรียกลิงก์)

ฉันสามารถทำให้สิ่งต่างๆทำงานได้ดีบน iPhone โดยการผูกtouchstartเหตุการณ์

ปัญหาคือบางครั้ง mobile safari ยังคงเลือกที่จะเรียกใช้:hoverกฎจาก css แทนที่จะเป็นtouchstartเหตุการณ์ของฉัน!

ฉันรู้ว่านี่เป็นปัญหาเพราะเมื่อฉันปิดใช้งาน:hoverกฎทั้งหมดด้วยตนเองใน css ซาฟารีมือถือใช้งานได้ดี (แต่เบราว์เซอร์ทั่วไปไม่เห็นได้ชัดอีกต่อไป)

มีวิธี "ยกเลิก" :hoverกฎแบบไดนามิกสำหรับองค์ประกอบบางอย่างเมื่อผู้ใช้อยู่ในซาฟารีมือถือหรือไม่

ดูและเปรียบเทียบพฤติกรรมของ iOS ที่นี่: http://jsfiddle.net/74s35/3/ หมายเหตุ: มีเพียงคุณสมบัติ css บางอย่างเท่านั้นที่ทำให้เกิดพฤติกรรมการคลิกสองครั้งเช่น display: none; แต่ไม่ใช่พื้นหลัง: สีแดง; หรือตกแต่งข้อความ: ขีดเส้นใต้;

Question 2

ฉันพบว่า ": hover" ไม่สามารถคาดเดาได้ใน iPhone / iPad Safari บางครั้งการแตะที่องค์ประกอบจะทำให้องค์ประกอบนั้นเป็น ": hover" ในขณะที่บางครั้งก็เลื่อนไปยังองค์ประกอบอื่น ๆ

ในขณะนี้ฉันแค่มีคลาส "ไม่แตะต้อง" ที่ร่างกาย

<body class="yui3-skin-sam no-touch">
   ...
</body>

และมีกฎ CSS ทั้งหมดด้วย ": hover" ด้านล่าง ".no-touch":

.no-touch my:hover{
   color: red;
}

ที่ไหนสักแห่งในหน้านี้ฉันมีจาวาสคริปต์เพื่อลบคลาสแบบไม่ต้องสัมผัสออกจากร่างกาย

if ('ontouchstart' in document) {
    Y.one('body').removeClass('no-touch');
}

สิ่งนี้ดูไม่สมบูรณ์แบบ แต่ก็ใช้ได้อยู่ดี

Question 3

:hoverไม่ใช่ปัญหาที่นี่ Safari สำหรับ iOS เป็นไปตามกฎที่แปลกมาก มันลุกเป็นไฟmouseoverและmousemoveครั้งแรก หากมีการเปลี่ยนแปลงในระหว่างเหตุการณ์เหล่านี้ "คลิก" และเหตุการณ์ที่เกี่ยวข้องจะไม่ถูกเริ่มทำงาน:

mouseenterและmouseleaveดูเหมือนจะรวมอยู่ด้วยแม้ว่าจะไม่ได้ระบุไว้ในแผนภูมิก็ตาม

หากคุณแก้ไขสิ่งใด ๆ อันเป็นผลมาจากเหตุการณ์เหล่านี้เหตุการณ์คลิกจะไม่เริ่มทำงาน ซึ่งรวมถึงสิ่งที่สูงขึ้นในทรี DOM ตัวอย่างเช่นวิธีนี้จะป้องกันไม่ให้การคลิกเพียงครั้งเดียวทำงานบนเว็บไซต์ของคุณด้วย jQuery:

$(window).on('mousemove', function() {
    $('body').attr('rel', Math.random());
});

แก้ไข: สำหรับการชี้แจงของ jQuery hoverเหตุการณ์รวมและmouseenter mouseleaveทั้งสองอย่างนี้จะป้องกันclickหากมีการเปลี่ยนแปลงเนื้อหา

Question 4

ไลบรารีการตรวจจับคุณลักษณะของเบราว์เซอร์Modernizerมีการตรวจสอบเหตุการณ์การสัมผัส

พฤติกรรมเริ่มต้นคือการใช้คลาสกับองค์ประกอบ html ของคุณสำหรับแต่ละคุณลักษณะที่ตรวจพบ จากนั้นคุณสามารถใช้คลาสเหล่านี้เพื่อจัดรูปแบบเอกสารของคุณ

หากไม่ได้เปิดใช้งานเหตุการณ์การสัมผัส Modernizr สามารถเพิ่มคลาสของno-touch:

<html class="no-touch">

จากนั้นกำหนดขอบเขตสไตล์โฮเวอร์ของคุณด้วยคลาสนี้:

.no-touch a:hover { /* hover styles here */ }

คุณสามารถดาวน์โหลด Modernizr build ที่กำหนดเองเพื่อรวมการตรวจจับคุณลักษณะให้น้อยที่สุดหรือมากเท่าที่คุณต้องการ

นี่คือตัวอย่างของบางคลาสที่อาจนำไปใช้:

<html class="js no-touch postmessage history multiplebgs
             boxshadow opacity cssanimations csscolumns cssgradients
             csstransforms csstransitions fontface localstorage sessionstorage
             svg inlinesvg no-blobbuilder blob bloburls download formdata">

Question 5

อุปกรณ์บางอย่าง (ตามที่คนอื่นบอก) มีทั้งเหตุการณ์สัมผัสและเมาส์ ตัวอย่างเช่น Microsoft Surface มีหน้าจอสัมผัสแทร็กแพดและสไตลัสซึ่งจะทำให้เกิดเหตุการณ์โฮเวอร์ขึ้นเมื่อวางเมาส์เหนือหน้าจอ

โซลูชันใด ๆ ที่ปิดใช้งาน:hoverตามเหตุการณ์ 'การสัมผัส' จะส่งผลกระทบต่อผู้ใช้ Surface (และอุปกรณ์อื่น ๆ ที่คล้ายคลึงกันอีกมากมาย) แล็ปท็อปรุ่นใหม่จำนวนมากสัมผัสได้และจะตอบสนองต่อเหตุการณ์การสัมผัสดังนั้นการปิดใช้งานการวางเมาส์ถือเป็นการปฏิบัติที่ไม่ดี

นี่เป็นข้อบกพร่องใน Safari ไม่มีเหตุผลใด ๆ สำหรับพฤติกรรมที่น่ากลัวนี้ ฉันปฏิเสธที่จะทำลายเบราว์เซอร์ที่ไม่ใช่ iOS เนื่องจากข้อบกพร่องใน iOS Safari ซึ่งเห็นได้ชัดว่ามีมาหลายปีแล้ว ฉันหวังว่าพวกเขาจะแก้ไขปัญหานี้สำหรับ iOS8 ในสัปดาห์หน้า แต่ในระหว่างนี้ ...

วิธีแก้ปัญหาของฉัน :

มีบางคนแนะนำให้ใช้ Modernizr แล้ว Modernizr ช่วยให้คุณสร้างการทดสอบของคุณเองได้ สิ่งที่ฉันทำโดยทั่วไปที่นี่คือ 'การทำให้เป็นนามธรรม' แนวคิดของเบราว์เซอร์ที่รองรับ:hoverการทดสอบ Modernizr ที่ฉันสามารถใช้ได้ตลอดทั้งรหัสโดยไม่ต้องเข้ารหัสif (iOS)ตลอด

 Modernizr.addTest('workinghover', function ()
 {
      // Safari doesn't 'announce' to the world that it behaves badly with :hover
      // so we have to check the userAgent  
      return navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? false : true;
 });

แล้ว css จะกลายเป็นแบบนี้

html.workinghover .rollover:hover 
{
    // rollover css
}

เฉพาะบน iOS เท่านั้นที่การทดสอบนี้จะล้มเหลวและปิดใช้งานโรลโอเวอร์

ส่วนที่ดีที่สุดของนามธรรมดังกล่าวคือถ้าฉันพบว่ามันแตกใน Android บางเครื่องหรือถ้าแก้ไขใน iOS9 ฉันก็สามารถแก้ไขการทดสอบได้

Question 6

ทางออกที่ดีกว่าโดยไม่ต้องใช้ JS, คลาส css และการตรวจสอบวิวพอร์ต: คุณสามารถใช้คุณสมบัติสื่อปฏิสัมพันธ์(Media Queries ระดับ 4)

แบบนี้:

@media (hover) {
  // properties
  my:hover {
    color: red;
  }
}

iOS Safari รองรับ

เพิ่มเติมเกี่ยวกับ: https://www.jonathanfielding.com/an-introduction-to-interaction-media-features/

Question 7

การเพิ่มไลบรารี FastClickลงในเพจของคุณจะทำให้การแตะทั้งหมดบนอุปกรณ์เคลื่อนที่กลายเป็นเหตุการณ์การคลิก (ไม่ว่าผู้ใช้จะคลิกที่ใด) ดังนั้นจึงควรแก้ไขปัญหาการวางเมาส์บนอุปกรณ์เคลื่อนที่ด้วย ฉันแก้ไขไวโอลินของคุณเป็นตัวอย่าง: http://jsfiddle.net/FvACN/8/

เพียงรวม fastclick.min.js lib บนเพจของคุณและเปิดใช้งานผ่าน:

FastClick.attach(document.body);

นอกจากนี้ยังช่วยลบความล่าช้า 300ms onClick ที่น่ารำคาญที่อุปกรณ์พกพาประสบ

มีผลที่ตามมาเล็กน้อยในการใช้ FastClick ที่อาจมีหรือไม่สำคัญกับไซต์ของคุณ:

หากคุณแตะที่ใดที่หนึ่งบนหน้าให้เลื่อนขึ้นเลื่อนกลับลงแล้วปล่อยนิ้วของคุณบนตำแหน่งเดียวกับที่คุณวางไว้ในตอนแรก FastClick จะแปลความหมายว่าเป็น "คลิก" แม้ว่าจะไม่ชัดเจนก็ตาม อย่างน้อยนั่นคือวิธีการทำงานใน FastClick เวอร์ชันที่ฉันใช้อยู่ (1.0.0) อาจมีคนแก้ไขปัญหาตั้งแต่เวอร์ชันนั้น
FastClick จะลบความสามารถในการ "ดับเบิ้ลคลิก" ของผู้อื่น

Question 8

โดยทั่วไปมีสามสถานการณ์:

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

คำตอบที่ยอมรับในตอนแรกจะใช้ได้ผลดีหากทำได้เพียงสองสถานการณ์แรกโดยที่ผู้ใช้มีทั้งตัวชี้หรือหน้าจอสัมผัส นี่เป็นเรื่องปกติเมื่อ OP ถามคำถามเมื่อ 4 ปีที่แล้ว ผู้ใช้หลายคนชี้ให้เห็นว่าอุปกรณ์ Windows 8 และ Surface ทำให้สถานการณ์ที่สามมีโอกาสมากขึ้น

วิธีแก้ปัญหา iOS สำหรับปัญหาที่ไม่สามารถวางเมาส์บนอุปกรณ์หน้าจอสัมผัส (ตามรายละเอียดโดย @Zenexer) เป็นวิธีที่ชาญฉลาด แต่อาจทำให้โค้ดตรงไปตรงมาทำให้ทำงานผิดปกติได้ (ตามที่ระบุไว้ใน OP) การปิดใช้งานโฮเวอร์เฉพาะสำหรับอุปกรณ์หน้าจอสัมผัสหมายความว่าคุณยังต้องเขียนโค้ดทางเลือกที่เป็นมิตรกับหน้าจอสัมผัส การตรวจจับเมื่อผู้ใช้มีทั้งตัวชี้และหน้าจอสัมผัสทำให้น้ำขุ่นขึ้น (ตามคำอธิบายของ @Simon_Weaver)

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

การคิดฟังก์ชัน "โฮเวอร์" ใหม่โดยคำนึงถึงหน้าจอสัมผัสมีการอภิปรายที่ดีเกี่ยวกับแนวทาง UX ทางเลือก คำตอบที่ให้ไว้ ได้แก่ :

การแทนที่เมนูโฮเวอร์ด้วยการดำเนินการโดยตรง (ลิงก์ที่มองเห็นได้เสมอ)
การเปลี่ยนเมนู on-hover ด้วยเมนู on-tap
การย้ายเนื้อหาบนโฮเวอร์จำนวนมากไปไว้ในเพจแยกกัน

ต่อไปนี่อาจเป็นทางออกที่ดีที่สุดสำหรับโครงการใหม่ทั้งหมด คำตอบที่ได้รับการยอมรับน่าจะเป็นทางออกที่ดีอันดับสอง แต่อย่าลืมคำนึงถึงอุปกรณ์ที่มีอุปกรณ์ตัวชี้ด้วย ระวังอย่ากำจัดฟังก์ชันการทำงานเมื่ออุปกรณ์มีหน้าจอสัมผัสเพื่อหลีก:hoverเลี่ยงการแฮ็กของ iOS

Question 9

เวอร์ชัน JQuery ใน. css ของคุณใช้. no-touch .my-element: โฮเวอร์สำหรับกฎโฮเวอร์ทั้งหมดของคุณรวมถึง JQuery และสคริปต์ต่อไปนี้

function removeHoverState(){
    $("body").removeClass("no-touch");
}

จากนั้นในแท็ก body ให้เพิ่ม class = "no-touch" ontouchstart = "removeHoverState ()"

ทันทีที่ออนทัชเริ่มยิงคลาสสำหรับสถานะโฮเวอร์ทั้งหมดจะถูกลบออก

Question 10

แทนที่จะมีเฉพาะเอฟเฟกต์โฮเวอร์เมื่อไม่มีการสัมผัสฉันได้สร้างระบบสำหรับจัดการเหตุการณ์การสัมผัสและนั่นช่วยแก้ปัญหาให้ฉันได้ อันดับแรกฉันกำหนดออบเจ็กต์สำหรับทดสอบเหตุการณ์ "แตะ" (เทียบเท่ากับ "คลิก")

touchTester = 
{
    touchStarted: false
   ,moveLimit:    5
   ,moveCount:    null
   ,isSupported:  'ontouchend' in document

   ,isTap: function(event)
   {
      if (!this.isSupported) {
         return true;
      }

      switch (event.originalEvent.type) {
         case 'touchstart':
            this.touchStarted = true;
            this.moveCount    = 0;
            return false;
         case 'touchmove':
            this.moveCount++;
            this.touchStarted = (this.moveCount <= this.moveLimit);
            return false;
         case 'touchend':
            var isTap         = this.touchStarted;
            this.touchStarted = false;
            return isTap;
         default:
            return true;
      }
   }
};

จากนั้นในตัวจัดการเหตุการณ์ของฉันฉันจะทำสิ่งต่อไปนี้:

$('#nav').on('click touchstart touchmove touchend', 'ul > li > a'
            ,function handleClick(event) {
               if (!touchTester.isTap(event)) {
                  return true;
               }

               // touch was click or touch equivalent
               // nromal handling goes here.
            });

Question 11

ขอบคุณ @Morgan Cheng สำหรับคำตอบอย่างไรก็ตามฉันได้แก้ไขฟังก์ชัน JS เล็กน้อยเพื่อรับ " touchstart " (รหัสที่นำมาจากคำตอบ @Timothy Perez ) แต่คุณต้องใช้ jQuery 1.7+ สำหรับสิ่งนี้

  $(document).on({ 'touchstart' : function(){
      //do whatever you want here
    } });

Question 12

จากการตอบสนองของ Zenexer รูปแบบที่ไม่ต้องใช้แท็ก HTML เพิ่มเติมคือ:

jQuery('a').on('mouseover', function(event) {
    event.preventDefault();
    // Show and hide your drop down nav or other elem
});
jQuery('a').on('click', function(event) {
    if (jQuery(event.target).children('.dropdown').is(':visible') {
        // Hide your dropdown nav here to unstick
    }
});

วิธีนี้จะเริ่มการทำงานของเมาส์โอเวอร์ก่อนคลิกที่สอง

Question 13

ฉันยอมรับว่าการปิดใช้งานโฮเวอร์สำหรับการสัมผัสเป็นวิธีที่จะไป

อย่างไรก็ตามเพื่อช่วยตัวคุณเองไม่ให้มีปัญหาในการเขียน css ซ้ำให้ห่อ:hoverรายการต่างๆ @supports not (-webkit-overflow-scrolling: touch) {}

.hover, .hover-iOS {
  display:inline-block;
  font-family:arial;
  background:red;
  color:white;
  padding:5px;
}
.hover:hover {
  cursor:pointer;
  background:green;
}

.hover-iOS {
  background:grey;
}

@supports not (-webkit-overflow-scrolling: touch) {
  .hover-iOS:hover {
    cursor:pointer;
    background:blue;
  }

}

<input type="text" class="hover" placeholder="Hover over me" />

<input type="text" class="hover-iOS" placeholder="Hover over me (iOS)" />

ขยายข้อมูลโค้ด

Question 14

สำหรับผู้ที่มีกรณีการใช้งานทั่วไปในการปิดใช้งาน:hoverเหตุการณ์บน iOS Safari วิธีที่ง่ายที่สุดคือใช้แบบสอบถามสื่อที่มีความกว้างต่ำสุดสำหรับ:hoverกิจกรรมของคุณซึ่งอยู่เหนือความกว้างหน้าจอของอุปกรณ์ที่คุณกำลังหลีกเลี่ยง ตัวอย่าง:

@media only screen and (min-width: 1024px) {
  .my-div:hover { // will only work on devices larger than iOS touch-enabled devices. Will still work on touch-enabled PCs etc.
    background-color: red;
  }
}

Question 15

ขนาดแค่ดูจอ ....

@media (min-width: 550px) {
    .menu ul li:hover > ul {
    display: block;
}
}

Question 16

นี่คือรหัสที่คุณต้องการวางไว้

// a function to parse the user agent string; useful for 
// detecting lots of browsers, not just the iPad.
function checkUserAgent(vs) {
    var pattern = new RegExp(vs, 'i');
    return !!pattern.test(navigator.userAgent);
}
if ( checkUserAgent('iPad') ) {
    // iPad specific stuff here
}