通过点击从div中删除一个样式而不是整个样式

Question

我有一个像这样的画布div

`<div id="canvas" style="pointer-events:none;">`

我有一个按钮，当按下它就会删除

样式

`<input id="" onclick="qqq()" class="button_text" type="button" name="test" value="test"/>`

function qqq() {
document.getElementById("canvas").removeAttribute("style");
alert("I was ran");

}

是否有一个简单的方法，使其改变指针事件从无到空，而不是删除样式?我找不到别的方法来做这件事。我尝试使用disabled=disabled，是的，我知道将onclick更改为事件侦听器。

Answer 1

找到该元素后，访问它的style属性，然后根据自己的喜好进行修改:

function qqq() {
document.getElementById("canvas").style.pointerEvents = null;
alert("I was ran");

}

Answer 2

最好的方法是简单地删除或切换(取决于您的具体情况)自定义实用程序类，如no-pointer:

const togglePointerEvents = () => {
document.querySelector("#canvas").classList.toggle("no-pointer");
};
document.querySelector("#togglePointerEvents").addEventListener("click", togglePointerEvents);

.no-pointer {
pointer-events: none;
background: red;
}

<div id="canvas" class="no-pointer">Some DIV element</div>
<button id="togglePointerEvents">Toggle pointer events</button>

或者，用classList.remove("no-pointer")代替toggle，你明白了。
另外，不要使用HTML内联on*处理程序。使用addEventListener代替。JS应该在一个地方，那是各自的标签或文件。不能在HTML中传播。

Answer 3

除非需要，否则不建议在标签中保留内联样式，因为它们具有最高的优先级。使用带有必要样式的css类是一种很好的做法。因此，有两个选项:

• 添加/删除类(推荐)
• 删除style属性或更改其内容(不推荐)

const toggleNoEvents = () => {
const canvasId = document.querySelector('#canvas');
canvasId.classList.toggle('no_events');
};

.no_events {
pointer-events:none;
/* to test */
user-select:none;
}

<div id="canvas" class="no_events">test</div>
<button onclick='toggleNoEvents()'>Toggle no events</button>

Answer 4

当用户选中复选框时，他们可以使用画布，然后他们不选中复选框，他们就不能使用画布，这对我来说是有效的，有点像一个bug，我不得不在一个上使用"，而不是另一个来让它工作。而且它是指针事件，而不是指针事件。

function signatureClear() {
document.getElementById("canvasWrap").style.pointerEvents = 'none';
}

了

function qqq() {
document.getElementById("canvasWrap").style.pointerEvents = null;
}