指針事件：沒有不工作

Question

我正在創建一個Web應用程序，我在其中創建了一個可點擊的卡片。我想要停用錨點標記上的零點機會的點擊事件。

但是pointer-events: none;不起作用。

爲了更好的理解，我在這裏設置了一個片段。

.fc-card-header { 
 
    background: #1976d2; 
 
    padding: 24px; 
 
    height: auto; 
 
    border-radius: 3px; 
 
    display: block; 
 
} 
 
.svg-icon svg { 
 
    width: 24px; 
 
    height: 24px; 
 
    fill: rgba(0,0,0,0.54); 
 
}

<a href="cmOpportunitySummary" class="white" style="text-decoration:none;pointer-events: none; cursor: default;;"> 
 
<div class="fc-card-header"> 
 
    <div class="grid-row"> 
 
     <div class="grid-cell text-left no-padding padding-right cell-auto-width"> 
 
      <div class="svg-icon no-width no-padding white" data-role="ico_RoundStar"><svg viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"></path> <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm4.24 16L12 15.45 7.77 18l1.12-4.81-3.73-3.23 4.92-.42L12 5l1.92 4.53 4.92.42-3.73 3.23L16.23 18z"></path></svg></div> 
 
     </div> 
 
     <div class="grid-cell no-padding flex flex-vcenter"> 
 
      <p class="text-left white">Opportunities</p> 
 
     </div> 
 
    </div> 
 
    <div class="grid-row padding-top"> 
 
     <div class="grid-cell no-padding padding-top padding-bottom text-left flex flex-vcenter"> 
 
      <span class="heading white no-line-height">0</span> 
 
     </div> 
 
    </div> 
 
</div> 
 
</a>

Answer 1

使用display:block;或display:inline-block;上a標籤，它會工作。

a { 
 
    text-decoration: none; 
 
    pointer-events: none; 
 
    cursor: default; 
 
    display: block; 
 
    color: #fff; 
 
} 
 
.fc-card-header { 
 
    background: #1976d2; 
 
    padding: 24px; 
 
    height: auto; 
 
    border-radius: 3px; 
 
    display: block; 
 
} 
 
.svg-icon svg { 
 
    width: 24px; 
 
    height: 24px; 
 
    fill: rgba(0, 0, 0, 0.54); 
 
}

<a href="cmOpportunitySummary" class="white"> 
 
    <div class="fc-card-header"> 
 
    <div class="grid-row"> 
 
     <div class="grid-cell text-left no-padding padding-right cell-auto-width"> 
 
     <div class="svg-icon no-width no-padding white" data-role="ico_RoundStar"> 
 
      <svg viewBox="0 0 24 24"> 
 
      <path d="M0 0h24v24H0z" fill="none"></path> 
 
      <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm4.24 16L12 15.45 7.77 18l1.12-4.81-3.73-3.23 4.92-.42L12 5l1.92 4.53 4.92.42-3.73 3.23L16.23 18z"></path> 
 
      </svg> 
 
     </div> 
 
     </div> 
 
     <div class="grid-cell no-padding flex flex-vcenter"> 
 
     <p class="text-left white">Opportunities</p> 
 
     </div> 
 
    </div> 
 
    <div class="grid-row padding-top"> 
 
     <div class="grid-cell no-padding padding-top padding-bottom text-left flex flex-vcenter"> 
 
     <span class="heading white no-line-height">0</span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</a>