如何通过JavaScript最简单地暂时禁用所有鼠标点击/拖动等事件?
我认为可以使用document.onclick = function() { return false; };
等方式,但这并没有起作用。
如何通过JavaScript最简单地暂时禁用所有鼠标点击/拖动等事件?
我认为可以使用document.onclick = function() { return false; };
等方式,但这并没有起作用。
如果目标是禁用整个页面的点击,则可以像这样做
document.addEventListener("click", handler, true);
function handler(e) {
e.stopPropagation();
e.preventDefault();
}
使用 addEventListener 的 true 参数可以确保在事件捕获阶段执行处理程序,即任何元素的点击都将首先在文档上进行捕获,并且文档的点击事件的侦听器会先于任何其他元素的侦听器被执行。这里的技巧是停止事件进一步传播到以下元素,从而结束分派过程,以确保事件未到达目标。
此外,您需要明确停止与事件目标元素关联的默认行为,因为它们将在分派过程完成后默认执行,即使事件已经被以上方阻止进一步传播。
还可以进一步修改以选择性地使用。
function handler(e) {
if(e.target.className=="class_name"){
e.stopPropagation();
e.preventDefault();
}
}
修改后的处理程序只会禁用带有"class_name"类的元素上的点击事件。
function handler(e) {
if(e.target.className!=="class_name") {
e.stopPropagation()
}
}
这将使得只有带有"class_name"类的元素才能被点击。
希望这有所帮助 :)document.removeEventListener('click', handler)
即可 :) - peernohelllet freezeClic = false; // just modify that variable to disable all clics events
document.addEventListener("click", e => {
if (freezeClic) {
e.stopPropagation();
e.preventDefault();
}
}, true);
我经常在加载时使用它,或者为了避免用户意外地双击动作按钮。简单且性能友好 :)
另一个我非常喜欢的原因是用户有视觉反馈:
/* style.css */
.loading {
cursor: wait; /* busy cursor feedback */
}
.loading * {
/* disable all mouse events on children elements */
pointer-events: none;
}
一个简单的示例,动态添加 .loading
类:
const elm = document.getElementById('myElm')
elm.classList.add('loading')
myAsyncFunction().then(() => elm.classList.remove('loading'))
window.addEventListener("click", (e) => {
e.stopPropagation();
e.stopImmediatePropagation();
e.preventDefault();
}, true)
stopPropagation 阻止事件捕获和冒泡。
stopImmediatePropagation 阻止相同的监听器(例如另一个窗口点击监听器)。
preventDefault 防止所有用户代理事件 (例如anchor href 或 form submit)。
event.stopPropagation()
和 event.preventDefault()
。另外,不要忘记 return false;
是另一种指示您想取消默认操作的方法...
通常,当函数具有任何有意义或有用的目的时,我们会从该函数返回一个值--事件属性 returnValue 指示此事件的默认操作是否已被阻止。它默认设置为 true,允许默认操作发生。将此属性设置为 false 可以防止默认操作。(来源:MDN Web Docs: Event.returnValue。)
return false
以取消事件是有意义的,因为它表示事件失败,并且因为事件处理程序使用它而有用。return false;
...document.addEventListener("click",handler,true);
function handler(e){
e.stopPropagation();
e.preventDefault();
return false;
}
这篇文章可能会有用:
http://www.computerhowtoguy.com/how-to-use-the-jquery-unbind-method-on-all-child-elements/
特别地,其中一个部分是递归函数,用于删除所有点击事件。请记住,如果使用jQuery创建了点击事件,则jQuery将删除点击事件。文章中给出的函数将删除使用jQuery创建的和未创建的所有点击事件。给出的函数如下:
function RecursiveUnbind($jElement) {
// remove this element's and all of its children's click events
$jElement.unbind();
$jElement.removeAttr('onclick');
$jElement.children().each(function () {
RecursiveUnbind($(this));
});
}
RecursiveUnbind($('#container'));
该函数接受一个jQuery对象参数,但您可以轻松更改它以传递字符串作为元素ID的名称,或者您认为最好的方式。
<a href="www.somesite.com" onclick="return yourFunction(this)">Link text</a>
<script type="text/javascript">
function yourFunction(anchor)
{ if(anchor.disabled) return;
/* Your function here */
}
</script>