禁用按钮时按钮的标签文本仍然可单击

发布于 2025-01-10 15:49:46 字数 656 浏览 0 评论 0原文

我有一个通过数据绑定禁用的按钮。运行时该按钮呈灰色。当用户将光标悬停在按钮的非文本区域上时，该按钮将充当禁用按钮 - 用户无法单击它。但是，如果用户将光标悬停在按钮中的文本标签上，则可以单击它。为什么？

<div class="flextable-item">
            <div class="btn-toolbar dashhead-toolbar float-left">
                <a href="@Url.Action("Edit", "VendorManagement", new { area = "Vendor" })/@Model.Id">
                    <button type="button" class="btn btn-primary-outline" data-bind="enable: EnableDetail">
                        <span class="icon icon-pencil" > Edit</span>
                    </button>
                </a>
            </div>
        </div>

原文

I have a button that I have disabled via a data-bind.
At runtime the button is grayed out.
When a user floats their cursor over the non-text area of the button, then the button acts as a disabled button - the user cannot click on it.
However, if the user floats their cursor over the text label in button, then they can click on it.
Why?

<div class="flextable-item">
            <div class="btn-toolbar dashhead-toolbar float-left">
                <a href="@Url.Action("Edit", "VendorManagement", new { area = "Vendor" })/@Model.Id">
                    <button type="button" class="btn btn-primary-outline" data-bind="enable: EnableDetail">
                        <span class="icon icon-pencil" > Edit</span>
                    </button>
                </a>
            </div>
        </div>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

心作怪 2025-01-17 15:49:46

当直接单击按钮时，disabled 属性会阻止触发单击事件。

当您单击按钮的任何子元素时，事件将冒泡到父元素。该按钮不会触发自己的单击处理程序，但会将事件传递给其自己的父级。

您可以通过附加返回 false 的点击处理程序来阻止元素的默认行为：

_{注意：下面的代码片段实际上不允许打开一个新选项卡，但您可以检查浏览器控制台以查看其在 enabled() === true 时尝试执行的默认行为。}

ko.applyBindings({
  enabled: ko.observable(false),
  checkEnabled: vm => {
    const isEnabled = vm.enabled();
    console.log(isEnabled
      ? "Allow click"
      : "Prevent click"
    );
    return isEnabled;
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>


<a data-bind="click: checkEnabled"
   href="https://stackoverflow.com" 
   target="_blank">
  <button data-bind="enable: enabled">
    <span>Go</span>
  </button>
</a>
<br>
<label>
  <input type="checkbox" data-bind="checked: enabled">
  Enable button
</label>

When the button is clicked directly, the disabled attribute prevents a click event from being triggered.

When you click any of the button's child elements, the event will bubble up to the parents. The button won't fire its own click handlers, but it will pass on the event to its own parent.

You can prevent the <a> element's default behavior by attaching a click handler that returns false:

_{Note: the snippet below won't actually allow the <a> to open a new tab, but you can check the browser console to see its default behavior trying to execute when enabled() === true.}

ko.applyBindings({
  enabled: ko.observable(false),
  checkEnabled: vm => {
    const isEnabled = vm.enabled();
    console.log(isEnabled
      ? "Allow click"
      : "Prevent click"
    );
    return isEnabled;
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>


<a data-bind="click: checkEnabled"
   href="https://stackoverflow.com" 
   target="_blank">
  <button data-bind="enable: enabled">
    <span>Go</span>
  </button>
</a>
<br>
<label>
  <input type="checkbox" data-bind="checked: enabled">
  Enable button
</label>

回复收藏 0 原文

~没有更多了~