今天遇到个问题，使用 SortableJS 对 element ui 表格添加了表头列拖动排序功能，代码如下：
注意这个：
filter 属性，这里指定了不需要拖动排序的表头类名，有 nodrag 这个类的表头无法拖动。那么问题来了，el-table因为开启了border属性可以拖动列宽，现在又加上了 nodrag 这个类会导致列宽无法拖动。
解决办法：
加入这行代码，不阻止默认行为
preventOnFilter: false, // 在触发过滤器`filter`的时候调用`event.preventDefault()`
查看SortableJS源码看到监听的是pointerdown事件，而 element ui里表头th绑定的mousedown事件
那么问题来了
pointerdown 里使用 e.preventDefault() 会导致自身或者内部元素的 mousedown 事件失效？
为了验证这个问题来个测试demo如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#parentDom {
width: 200px;
height: 200px;
background-color: gray;
cursor: pointer;
}
#test {
width: 100px;
height: 100px;
background-color: red;
margin: 50px auto;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: transform 0.3s;
}
</style>
</head>
<body>
<div id="parentDom">
<div id="test"></div>
</div>
</body>
<script>
let dom = document.querySelector("#test");
// dom.addEventListener("click", function (e) {
// console.log(e, "dom元素被点击");
// });
// dom.addEventListener("mousedown", function (e) {
// console.log(e, "onmousedown");
// });
dom.onclick = function (event) {
console.log("onclick");
};
dom.onmousedown = function (event) {
console.log("onmousedown");
};
dom.onmouseenter = function (event) {
console.log("onmouseenter");
};
// dom.onpointerdown = function(e) {
// return e.cancelable && e.preventDefault() // 自身也会导致内部元素的 onmousedown 事件失效
// };
let parentDom = document.querySelector("#parentDom");
parentDom.addEventListener("pointerdown", function (e) {
return e.cancelable && e.preventDefault(); // 这会导致内部元素的 onmousedown 事件失效
});
// parentDom.addEventListener("mousedown",function(e){
// return e.cancelable && e.preventDefault() // 改为 mousedown不会影响内部元素的 onmousedown 事件
// })
</script>
</html>
测试1：可以看到内部元素的 mousedown 事件失效
测试2：但是父元素pointerdown改为mousedown就不会影响内部元素的mousedown 事件
测试3：又试了下直接在子元素上绑定pointerdown，发现e.preventDefault()后也不会触发mousedown事件
那么结论来了：
pointerdown 里使用 e.preventDefault() 确实会导致自身与内部元素的 mousedown 事件失效
关于为什么有这种现象，以下是百度AI助手的回答，准确性自行斟酌：
在 Web 开发中，pointerdown 和 mousedown 事件都用于处理鼠标按下的动作，但它们属于不同的事件体系：pointerdown 属于 Pointer Events，而 mousedown 属于传统的 Mouse Events。
当你对一个元素使用 pointerdown 事件，并在事件处理函数中调用 e.preventDefault()，这实际上是在阻止该事件的默认行为，并且会影响事件流。在 Pointer Events 的上下文中，preventDefault() 可能会阻止事件进一步传播到 Mouse Events，这是因为 Pointer Events 旨在提供一个统一的接口来处理各种输入设备（如鼠标、触摸、笔等），并且在某些情况下，它会替代传统的鼠标事件。
具体到你的情况，当你在外部元素上监听 pointerdown 事件并调用 preventDefault()，这可能会阻止内部元素的 mousedown 事件被触发。这是因为 preventDefault() 阻止了事件的进一步传播，包括到内部元素的传播。
如果你希望同时处理外部元素的 pointerdown 事件和内部元素的 mousedown 事件，你可以考虑以下几种解决方案：
1.不使用 preventDefault()：如果 preventDefault() 不是必需的，你可以简单地移除它，这样事件就可以继续传播到内部元素。
2.使用不同的事件处理逻辑：根据具体需求，你可能需要重新考虑事件处理逻辑，以确保在不阻止内部元素事件的情况下实现所需的功能。
3.显式地触发内部元素的事件：在某些情况下，你可以在外部元素的事件处理函数中显式地触发内部元素的事件。例如，你可以在外部元素的 pointerdown 事件处理函数中使用 JavaScript 来触发内部元素的 mousedown 事件。
4.使用事件捕获或冒泡：通过改变事件监听器的注册方式（使用捕获或冒泡模式），你可能能够更精细地控制事件的传播。
总之，处理这类问题时需要仔细考虑事件流和默认行为的影响，并根据具体需求选择合适的事件处理策略。
总结：
pointerdown 里使用 e.preventDefault() 确实会导致自身与内部元素的 mousedown 事件失效。
若对你有帮助，请点个赞吧，若能打赏不胜感激，谢谢支持！
本文地址：//www.greatytc.com/p/2ac6001f0eca?v=1727158397615，转载请注明出处，谢谢。
