Question

我希望隐藏光标，直到我的功能完成，但我无法找到如何禁用它。我的意思是我已经找到了如何隐藏它并显示它但是当它被隐藏时我仍然可以点击那么如何禁用它？

window.document.styleSheets[0].insertRule('* {cursor: none;}', window.document.styleSheets[0].cssRules.length);
Meteor.call("lockTheMachine", machine.nameMachine, Session.get("loggedUser"), function(err, res) {
  if (!err) {
    Session.set("lastMachineUsed", machine.nameMachine);
    window.document.styleSheets[0].insertRule('* {cursor: default   ;}', window.document.styleSheets[0].cssRules.length);
  } else {
    console.error(err);
  }
});
}

Answer 1

有一个名为指针事件的CSS属性。

CSS属性指针事件允许作者控制特定图形元素在什么情况下（如果有的话）成为鼠标事件的目标。

除了指示该元素不是鼠标事件的目标之外，值none指示鼠标事件“穿过”该元素并将目标转移到该元素的“下面”。

如果要禁用整个网站上的任何点击互动，只需添加：

即可

body.block { pointer-events: none; }

通过Javascript以编程方式触发类.block。

Answer 2

您只需在CSS文件中添加以下样式即可解决问题。

    button {
pointer-events: none;
}

问题在于该按钮不可点击，但当您将鼠标悬停在按钮上时仍会显示光标。

要解决此问题，您可以添加＆＃34;禁用＆＃34;属性为按钮并添加以下CSS。

button {
cursor: not-allowed; // or cursor: none;
}

当您添加css＆＃34;光标＆＃34;：＆＃34;不允许＆＃34;或＆＃34;无＆＃34;对于输入类型或按钮，该按钮仍然是可点击的。要使输入类型或按钮不可点击，您必须添加＆＃34;禁用＆＃34;属性。

禁用的输入元素无法使用且无法点击。可以设置disabled属性以防止用户使用该元素，直到满足某些其他条件（如选择复选框等）。然后，JavaScript可以删除禁用的值，并使元素可用。

但是当你使用bootstarp库时，当你禁用了一个按钮或输入类型时，当你将鼠标悬停在该元素上时，你看不到任何光标。在最新的bootstrap库中，我们可以找到以下规则：

.btn.disabled, .btn[disabled], fieldset[disabled] .btn {
pointer-events: none;
cursor: not-allowed;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
box-shadow: none;
opacity: .65;
}

所以我假设bootstrap试图实现游标：不允许禁用按钮或输入。

因此，为此，您必须为其覆盖引导类。

但是当你没有在你的HTML中链接bootstrap库时，它可以正常工作。

e.g：

HTML code：

<button class="disabled-button" disabled>
I am disabled and not clickable too
</button>

CSS代码：

.disabled-button {
  cursor: not-allowed;
}

或者您可以触发＆＃34; .disabled-button＆＃34;通过javascript程序化，无法点击它。

如何禁用光标，但不仅仅是视觉上？

2 个答案: