极客观点
项目管理
HarmonyOS
<body onselectstart="return false" class="whiteBg">
<div>123</div>
</body>div元素无法选择，受body的onselectstart影响。
实际上并不知道是哪个父元素。
用js如何移除这个事件？
怎样用js移除当前元素受父元素影响的事件？
阅读 2.6k
function removeSelectStart(element) {
if (element.onselectstart) {
element.onselectstart = null;
}
if (element.parentElement) {
removeSelectStart(element.parentElement);
}
}
removeSelectStart(document.getElementById('yourElementId'));
按你题目的描述，如果是在不知道事件绑定在哪个祖先元素的前提下，根据不同的事件绑定方式，有不同的解决方法：
// 移除用"on"加事件名所绑定的事件
function removeEvent(el, event) {
let parent;
event = "on" + event.toLowerCase();
while (parent = el.parentNode) {
if (parent[event]) parent[event] = null;
}
}
removeEvent(document.querySelector("div"), "selectStart");如果祖先元素是用addEventListener方法绑定事件的话，则需要一点小技巧来解决：
// 重写原生事件绑定方法，将已绑定事件缓存起来，方便获取所有事件以解除绑定
const eventMap = new Map;
const elementProto = Element.prototype;
const addEventListener = elementProto.addEventListener;
const removeEventListener = elementProto.removeEventListener;
elementProto.addEventListener = function (event, callback, useCapture) {
if (typeof callback !== "function") return;
event = event.toLowerCase();
let listeners, type = event + (useCapture ? "Capture" : "");
if (!(listeners = eventMap.get(this))) {
listeners = { [type]: new Set([callback]) };
eventMap.set(this, listeners);
} else if (!listeners[type]) {
listeners[type] = new Set([callback]);
} else {
listeners[type].add(callback);
}
addEventListener.call(this, event, callback, useCapture);
};
elementProto.removeEventListener = function (event, callback, useCapture) {
if (typeof callback !== "function") return;
event = event.toLowerCase();
let listeners, type = event + (useCapture ? "Capture" : "");
if (
(listeners = eventMap.get(this)) &&
listeners[type] && listeners[type].delete(callback)
) {
removeEventListener.call(this, event, callback, useCapture);
}
};
// 移除指定元素的所有祖先元素所绑定的某个事件
function removeAllEventListeners(el, event, useCapture) {
event = event.toLowerCase();
const type = event + (useCapture ? "Capture" : "");
eventMap.forEach((listeners, parent) => {
if (parent.contains(el) && listeners[type]) {
listeners[type].forEach(callback => {
parent.removeEventListener(event, callback, useCapture);
});
}
});
}
removeAllEventListeners(document.querySelector("div"), "selectStart");撰写回答
你尚未登录，登录后可以
- 和开发者交流问题的细节
- 关注并接收问题和回答的更新提醒
- 参与内容的编辑和改进，让解决方法与时俱进
推荐问题
js 如何将Key属性相同的放在同一个数组？
{代码...} 说明：id和name是动态的，有可能后台返回的是age和school,不是固定id和name想要的结果是; {代码...}13 回答13k 阅读
如何防止接口的 key 泄露?
目前有一个小程序,功能上比较简单,但是需要调用其他平台提供的 AI 相关接口。为了节省服务器费用,想直接在前端请求接口,但是这样就会暴露接口的 key。有没有其他办法可以防止 key 泄露? 或者默许 key 可能的泄露,然后实时监控接口的使用量,这种方式是否可行?8 回答2.9k 阅读
字节的 trae AI IDE 不支持类似 vscode 的 ssh remote 远程开发怎么办？
尝试一下字节的 trae AI IDE ([链接])安装后导入 vscode 的配置，好像一起把 vscode 的插件也导入了也能看到 vscode 之前配置的 ssh remote 但是连不上看到「输出」如下⬇️ {代码...}2 回答5.2k 阅读✓ 已解决
在购买页面，这里有： for 1 month, for 3 months，这里说的意思是什么呢？
请问：在购买页面，这里有： for 1 month, for 3 months，这里说的意思是什么呢？5 回答1.5k 阅读
Next.js做纯前端是否可行？
最近在学习Next.js存在一个疑问，如果只需要做前端界面的渲染和交互后端逻辑都用java来做，是否还需要使用Next.js，还是说直接使用React+Tailwind css更好7 回答2.2k 阅读
CSS如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？
参考使用：antd的Tag我做了2行的Tag： {代码...} 现在的需求是，如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？3 回答1.3k 阅读✓ 已解决
请问开发React Native，一般是推荐哪个主流的UI库呢？
请问开发React Native，一般是推荐哪个主流的UI库呢？我们知道React有antd，但是React Native的话好像React Native Mobile RN不是最主流的。3 回答2.3k 阅读✓ 已解决
那就试试只把div的传播事件去掉(如果有的话)