指针事件：没有一个不起作用答案

【问题标题】：pointer-events: none is not working指针事件：没有一个不起作用
【发布时间】：2023-03-06 00:38:02
【问题描述】：

我正在创建一个 Web 应用程序，并在其中制作了一张可点击的卡片。我想为零机会禁用锚标记上的点击事件。

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

我在这里设置了一个 sn-p 以便更好地理解。

.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>

【问题讨论】：

在你的函数调用中添加 e.preventDefault();
谢谢@hunzaboy，但我不想使用 JavaScript。
有什么理由不能只删除href=''？
@gavgrif 这不是真的。它在 HTML5 中完全有效。 w3.org/TR/2016/REC-html51-20161101/…
@Turnip - 谢谢你教我一件事 - 我完全认为这是无效的标记。我错了。干杯:)

标签： html css

【解决方案1】：

在a 标签上使用display:block; 或display:inline-block;，它会起作用。

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>

【讨论】：

@Sravan pointer-events:none 适用于所有类型的元素，但不知何故在这种情况下它不适用于a，因为我猜是因为将块元素包装成内联元素。或者可能是因为URL格式不合适<a href="cmOpportunitySummary" class="white">
它似乎适用于所有内联元素。这是一个 CSS 怪癖？

【解决方案2】：

在我的情况下，我有按钮标签。添加 display: inline-block 有助于 MAC 上的 Safari 浏览器。

<button
    className={props.btnClass} 
    style={{padding:props.btnPadding}}
    onClick={props.btnAction}
>
    {props.btnTitlle}
</button>

下面是 CSS：

button.disabledBtn {
    cursor: not-allowed;
    background: #7eb2ec;
    border: 2px solid #7eb2ec;
    margin-right: 22px;
    font-weight: initial;
    &:active {
      display: inline-block;
      pointer-events: none;
    }
  }

【讨论】：