เพิ่มคุณสมบัติเคอร์เซอร์ CSS เมื่อใช้“ pointer-events: none”

Question 1

ฉันกำลังพยายามปิดการใช้งานลิงก์เฉพาะและใช้รูปแบบเคอร์เซอร์ แต่คำสั่ง CSS นี้cursor: text;จะไม่มีผล เคอร์เซอร์เป็นค่าเริ่มต้นเสมอ ฉันใช้ Firefox เวอร์ชันล่าสุด

CSS:

pointer-events: none !important;
cursor: text;
color: Blue;

Question 2

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

ตัวอย่างที่นี่

HTML

<span class="wrapper">
    <a href="#">Some Link</a>
</span>

CSS

.wrapper {
    position: relative;
    cursor: text;  /* This is used */
}
.wrapper a {
    pointer-events: none;
}

มีความไม่สอดคล้องกันของเบราว์เซอร์บางส่วน เพื่อให้ใช้งานได้ใน IE11 ดูเหมือนว่าคุณต้องมีองค์ประกอบหลอก องค์ประกอบหลอกยังช่วยให้คุณเลือกข้อความใน FF ผิดปกติคุณสามารถเลือกข้อความใน Chrome ได้โดยไม่ต้องใช้มัน

อัปเดตตัวอย่าง

.wrapper:after {
    content: '';
    position: absolute;
    width: 100%; height: 100%;
    top: 0; left: 0;
}

Question 3

คำถามเดิมค่อนข้างยาว แต่นี่เป็นวิธีแก้ปัญหาของฉันโดยไม่มีองค์ประกอบการตัดและเคอร์เซอร์ที่ไม่มีเหตุการณ์ตัวชี้:

<!-- Add tabindex="-1" so that element cannot be reached by keyboard -->
<a href="url" class="disabled" tabindex="-1" onfocus="this.blur()">Disabled link</a>

CSS:

/* Adding cursor just works: */
.disabled {
    cursor: not-allowed;
}

/* Makes link non-clickable: */
.disabled:active {
    pointer-events: none;
}

ตัวอย่าง CodePen

แก้ไข:

Chrome ได้เริ่มให้ความสำคัญกับการคลิกองค์ประกอบที่มีแอตทริบิวต์ tabindex (แม้จะมี tabindex = "- 1") วิธีแก้ปัญหาที่เร็วที่สุดคือตั้งค่าonfocus="this.blur()"เป็นองค์ประกอบที่ไม่โฟกัส
คุณต้องป้องกันไม่ให้โฟกัสองค์ประกอบมิฉะนั้นจะเปิดใช้งานได้โดยใช้ปุ่ม Enter

Question 4

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

หลักฐานที่จะพบได้ที่นี่

Question 5

pointer-events: none !important;ลบ ปิดการใช้งานลิงก์โดยใช้ JavaScript:

anchorElement.onclick = function(){
  return false;
}

หากคุณไม่ทราบว่า JavaScript anchorElementเป็น Node หรือ Element เอง วิธีทั่วไปในการรับองค์ประกอบคือการใช้idแอตทริบิวต์HTML สมมติว่าเรามี:

<a id='whatever' href='#'>Text Here</a>

รหัสของคุณอาจเป็น:

document.getElementById('whatever').onclick = function(){
  return false;
}

มีหลายวิธีในการรับโหนด

Question 6

กรณีการใช้งานของฉันเป็นองค์ประกอบที่ลากได้ซึ่งไม่มีตัวชี้เหตุการณ์หรือองค์ประกอบหลักใด ๆ ที่มีตัวชี้เหตุการณ์

ฉันแก้ไขได้โดยใช้รูปแบบโกลบอลตามเงื่อนไขบังคับให้เคอร์เซอร์จับขณะลากเท่านั้น (ฉันใช้ React และ style-components แต่สามารถใช้ตรรกะเดียวกันกับ vanilla js ได้)

const SetDraggingCursor = createGlobalStyle`
  * {
    cursor: grabbing !important;
  }
`;

// ...

{isDragging && <SetDraggingCursor />}

Question 7

คุณสามารถสร้าง div อื่นและวางตำแหน่งให้ตรงกับ div สุดท้ายของคุณและสร้าง css ดังนี้:

.example{
    background-color: rgba(255, 255, 255, 0); //opacity:0
    z-index: 1;
    cursor: not-allowed;
}

Question 8

แทนที่จะเป็น wrapper สามารถทำได้ด้วย CSS บริสุทธิ์จากด้านในเช่นกัน (ฉันใช้สิ่งนี้กับองค์ประกอบเว็บวัสดุดังนั้นโค้ดจึงซับซ้อนขึ้นเล็กน้อย)

button:disabled {
    > * {
        cursor: not-allowed;
        pointer-events: initial;
    }

    &::before {
        background-color: #fff0;
    }

    &::after {
        background-color: #fff0;
    }
}

<button>
    <svg .../>
</button>

ฉันยังพยายาม::beforeและ::afterมีbutton:disabledโดยตรง แต่ก็ไม่สามารถทำให้มันเกิดขึ้น ...