面试题：Vue自定义指令结合事件冲突与优先级处理

设计指令

在Vue项目中，通过Vue.directive来创建自定义指令。例如：

Vue.directive('custom - events', {
    bind: function (el, binding, vnode) {
        // 这里进行指令绑定到元素时的初始化操作
    },
    inserted: function (el, binding, vnode) {
        // 元素插入到DOM后执行的操作，在这里绑定事件
    },
    unbind: function (el, binding, vnode) {
        // 指令从元素解绑时的操作，移除事件监听器
    }
});

监听和处理事件

自定义事件：

对于自定义拖拽事件，可通过监听mousedown、mousemove、mouseup事件来模拟实现。在mousedown时记录初始位置，mousemove时计算位移并更新元素位置，mouseup时停止拖拽。例如：

let startX, startY;
el.addEventListener('mousedown', function (e) {
    startX = e.clientX;
    startY = e.clientY;
    document.addEventListener('mousemove', dragMove);
    document.addEventListener('mouseup', dragEnd);
});
function dragMove(e) {
    const dx = e.clientX - startX;
    const dy = e.clientY - startY;
    // 更新元素位置
    el.style.transform = `translate(${dx}px, ${dy}px)`;
}
function dragEnd() {
    document.removeEventListener('mousemove', dragMove);
    document.removeEventListener('mouseup', dragEnd);
}

对于自定义缩放事件，可通过监听wheel事件，根据滚轮滚动方向来缩放元素。例如：

el.addEventListener('wheel', function (e) {
    const scale = e.deltaY > 0? 0.9 : 1.1;
    el.style.transform = `scale(${scale})`;
});

原生事件：

监听原生点击事件click、滚动事件scroll等，例如：

el.addEventListener('click', function () {
    // 点击事件处理逻辑
});
window.addEventListener('scroll', function () {
    // 滚动事件处理逻辑
});

事件优先级处理：
- 可以使用一个数组来记录事件处理函数，按照优先级顺序添加。例如，先添加自定义拖拽事件处理函数，再添加原生点击事件处理函数。在事件触发时，按照数组顺序依次执行处理函数。
```
const eventHandlers = [];
eventHandlers.push(dragMove);
eventHandlers.push(() => {
    // 点击事件处理逻辑
});
// 事件触发时依次执行eventHandlers中的函数
```

处理兼容性问题

浏览器兼容性：

对于wheel事件，不同浏览器的deltaY等属性可能存在差异。可以使用e.wheelDelta（IE、Opera）或者e.detail（Firefox）来兼容不同浏览器。例如：

el.addEventListener('wheel', function (e) {
    let delta = 0;
    if (e.wheelDelta) {
        delta = e.wheelDelta;
    } else if (e.detail) {
        delta = -e.detail;
    }
    const scale = delta > 0? 0.9 : 1.1;
    el.style.transform = `scale(${scale})`;
});

设备兼容性：

对于移动端设备，需要考虑触摸事件来实现拖拽和缩放。例如，通过监听touchstart、touchmove、touchend事件来实现类似的功能。

let touchStartX, touchStartY;
el.addEventListener('touchstart', function (e) {
    touchStartX = e.touches[0].clientX;
    touchStartY = e.touches[0].clientY;
    document.addEventListener('touchmove', touchDragMove);
    document.addEventListener('touchend', touchDragEnd);
});
function touchDragMove(e) {
    const dx = e.touches[0].clientX - touchStartX;
    const dy = e.touches[0].clientY - touchStartY;
    // 更新元素位置
    el.style.transform = `translate(${dx}px, ${dy}px)`;
}
function touchDragEnd() {
    document.removeEventListener('touchmove', touchDragMove);
    document.removeEventListener('touchend', touchDragEnd);
}

星途面试题库

面试题：Vue自定义指令结合事件冲突与优先级处理

知识考点

面试题答案