ทางเลือกคุณสมบัติของ css 'pointer-events' สำหรับ IE

ฉันมีเมนูการนำทางแบบเลื่อนลงซึ่งบางส่วนของชื่อไม่ควรนำทางไปยังหน้าอื่นเมื่อคลิก (ชื่อเหล่านี้เปิดเมนูแบบเลื่อนลงเมื่อคลิก) ส่วนที่อื่น ๆ ควรนำทาง (สิ่งเหล่านี้ไม่มีรายการแบบเลื่อนลงและนำทางโดยตรง) ประเภทได้hrefกำหนดไว้

เพื่อแก้ปัญหานี้ฉันได้เพิ่ม CSS ต่อไปนี้สำหรับชื่อประเภทเดิม

pointer-events: none;

และใช้งานได้ดี แต่เนื่องจาก IE ไม่รองรับคุณสมบัตินี้ฉันกำลังมองหาการแก้ไข สิ่งที่น่ารำคาญคือฉันไม่มีสิทธิ์เข้าถึงและเปลี่ยนรหัส HTML และ JavaScriptอย่างสมบูรณ์

ความคิดใด ๆ

ตัวชี้เหตุการณ์คือแฮ็ค Mozilla และที่ที่มันถูกนำไปใช้ในเบราว์เซอร์ Webkit คุณไม่สามารถคาดหวังได้ว่าจะเห็นมันในเบราว์เซอร์ IE อีกล้านปี

อย่างไรก็ตามมีวิธีแก้ปัญหาที่ฉันพบ:

การส่งต่อเหตุการณ์เมาส์ผ่านเลเยอร์

สิ่งนี้ใช้ปลั๊กอินที่ใช้คุณสมบัติบางอย่างที่ไม่รู้จัก / เข้าใจของ Javascript เพื่อนำเหตุการณ์เมาส์และส่งไปยังองค์ประกอบอื่น

นอกจากนี้ยังมีอีกวิธีที่จาวาสครินี่

อัปเดตสำหรับตุลาคม 2556 : เห็นได้ชัดว่ากำลังจะมาถึง IE ใน v11 แหล่ง ขอบคุณทิม

นี่เป็นอีกวิธีการหนึ่งที่ง่ายต่อการติดตั้งโค้ด 5 บรรทัด:

1. จับภาพเหตุการณ์ 'mousedown' สำหรับองค์ประกอบด้านบน (องค์ประกอบที่คุณต้องการปิดกิจกรรมตัวชี้)
2. ใน 'mousedown' ซ่อนองค์ประกอบด้านบน
3. ใช้ 'document.elementFromPoint ()' เพื่อรับองค์ประกอบพื้นฐาน
4. เลิกซ่อนองค์ประกอบด้านบน
5. ดำเนินการเหตุการณ์ที่ต้องการสำหรับองค์ประกอบพื้นฐาน

ตัวอย่าง:

//This is an IE fix because pointer-events does not work in IE
$(document).on('mousedown', '.TopElement', function (e) {

    $(this).hide();
    var BottomElement = document.elementFromPoint(e.clientX, e.clientY);
    $(this).show();
    $(BottomElement).mousedown(); //Manually fire the event for desired underlying element

    return false;

});

มีวิธีแก้ปัญหาสำหรับ IE - ใช้ inline SVG และตั้งตัวชี้เหตุการณ์ = "none" ใน SVG ดูคำตอบของฉันในวิธีทำให้ Internet Explorer เลียนแบบตัวชี้เหตุการณ์: ไม่มี

เป็นมูลค่าการกล่าวขวัญว่าเฉพาะสำหรับ IE ใช้disabled=disabledงานได้กับแท็กจุดยึด:

<a href="contact.html" onclick="unleashTheDragon();" disabled="disabled">Contact</a>

IE ถือว่าสิ่งนี้เป็นdisabledองค์ประกอบและไม่เรียกใช้เหตุการณ์การคลิก อย่างไรก็ตามdisabledไม่ใช่แอตทริบิวต์ที่ถูกต้องบนแท็กจุดยึด ดังนั้นสิ่งนี้จะไม่ทำงานในเบราว์เซอร์อื่น สำหรับพวกเขาpointer-events:noneเป็นสิ่งจำเป็นในการออกแบบ

UPDATE 1 : ดังนั้นการเพิ่มความรู้สึกกฎต่อไปนี้เช่นการแก้ปัญหาเบราว์เซอร์ให้ฉัน

UPDATE 2 : สำหรับการทำงานร่วมกันต่อไปเพราะ IE จะได้รูปแบบรูปแบบสำหรับแท็กสมอด้วยdisabled='disabled'ดังนั้นพวกเขาจะยังคงมีลักษณะการใช้งาน ดังนั้นa:hover{}กฎและสไตล์จึงเป็นความคิดที่ดี:

a[disabled="disabled"] {
        pointer-events: none; /* this is enough for non-IE browsers */
        color: darkgrey;      /* IE */
    }
        /* IE - disable hover effects */   
        a[disabled="disabled"]:hover {
            cursor:default;
            color: darkgrey;
            text-decoration:none;
        }

ทำงานกับ Chrome, IE11 และ IE8
แน่นอนเหนือ CSS ถือว่าแท็ก anchor แสดงผลด้วยdisabled="disabled"

นี่เป็นสคริปต์ขนาดเล็กที่ใช้คุณสมบัตินี้ (ได้รับแรงบันดาลใจจากบทความบล็อกของShea Frederickที่ Kyle กล่าวถึง):

• ชี้เหตุการณ์ Polyfill

ครอบคลุมองค์ประกอบที่ละเมิดด้วยบล็อกที่มองไม่เห็นโดยใช้องค์ประกอบปลอม: :beforeหรือ:after

a:before {
//IE No click hack by covering the element.
  display:block;
  position:absolute;
  height:100%;
  width:100%;
  content:' ';
}

ดังนั้นคุณจะได้รับการคลิกบนองค์ประกอบหลัก ไม่ดีถ้าผู้ปกครองสามารถคลิกได้ แต่ทำงานได้ดี

ฉันใช้เวลาเกือบสองวันในการหาวิธีแก้ไขปัญหานี้และพบสิ่งนี้ในที่สุด

สิ่งนี้ใช้จาวาสคริปต์และ jquery

(GitHub) pointer_events_polyfill

สิ่งนี้สามารถใช้ปลั๊กอิน javascript เพื่อดาวน์โหลด / คัดลอก เพียงคัดลอก / pointer_events_polyfill.jsดาวน์โหลดโค้ดจากเว็บไซต์ที่และบันทึกเป็น รวมจาวาสคริปต์นั้นไว้ในเว็บไซต์ของคุณ

<script src="JS/pointer_events_polyfill.js></script>

เพิ่มสคริปต์ jquery นี้ในเว็บไซต์ของคุณ

$(document).ready(function(){
    PointerEventsPolyfill.initialize({});
});

และอย่าลืมรวมปลั๊กอิน jquery ของคุณด้วย

มันได้ผล! ฉันสามารถคลิกองค์ประกอบภายใต้องค์ประกอบโปร่งใส ฉันใช้ IE 10 ฉันหวังว่านี่สามารถทำงานได้ใน IE 9 และที่ต่ำกว่า

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

javascript:

document.getElementById("theTextbox").focus();

JQuery:

$("#theTextbox").focus();

ซึ่งช่วยให้คุณพิมพ์ข้อความลงในกล่องข้อความ

ฉันพบวิธีแก้ไขปัญหาอื่นแล้ว ฉันใช้ jQuery เพื่อตั้งค่าhref-attribute เป็นjavascript:;(ไม่ใช่ '' หรือเบราว์เซอร์จะโหลดหน้าเว็บใหม่) หากความกว้างของหน้าต่างเบราว์เซอร์มากกว่า 1'000px คุณต้องเพิ่ม ID ในลิงค์ของคุณ นี่คือสิ่งที่ฉันทำ:

// get current browser width
var width = $(window).width();
if (width >= 1001) {

    // refer link to nothing
    $("a#linkID").attr('href', 'javascript:;'); 
}

อาจเป็นประโยชน์สำหรับคุณ

ใช้ OnClientClick = "return false;"

คุณสามารถเพียงแค่ "ไม่" เพิ่ม URL ภายใน<a>แท็กฉันทำเช่นนี้สำหรับเมนูที่มี<a>แท็กที่ขับเคลื่อนด้วยแบบเลื่อนลงเช่นกัน หากไม่มีการเลื่อนลงฉันจะเพิ่ม url แต่หากมีการดร็อปดาวน์ด้วย<ul> <li>รายการที่ฉันเพิ่งลบออก

ฉันประสบปัญหาที่คล้ายกัน:

1. ฉันประสบปัญหานี้ในคำสั่งฉันแก้ไขได้โดยเพิ่มองค์ประกอบหลักและสร้างตัวชี้เหตุการณ์: ไม่มีสำหรับสิ่งนั้น

2. การแก้ไขด้านบนไม่ทำงานสำหรับแท็กที่เลือกจากนั้นฉันเพิ่มเคอร์เซอร์: ข้อความ (ซึ่งเป็นสิ่งที่ฉันต้องการ) และมันได้ผลสำหรับฉัน

หากต้องการเคอร์เซอร์ปกติคุณสามารถเพิ่มเคอร์เซอร์ได้: ค่าเริ่มต้น

ทางออกที่ดีที่สุด:

.disabled{filter: alpha(opacity=50);opacity: 0.5;z-index: 1;pointer-events: none;}

ทำงานได้อย่างสมบูรณ์แบบบนเบราว์เซอร์ทั้งหมด