事件触发时的Javascript激活功能

我编写了一些基于事件的Javascript函数，比如click ecc

以下代码的第一部分适用于特定任务1：

document.addEventListener('click', onDocumentMouseClick, false);

function onDocumentMouseClick(event) {/*  some code   */}

下面的代码是针对task2的，onDocumentMouseMove、onDocumentMouseDown和onDocumentMouseUp三个函数协同工作：

document.addEventListener( 'mousemove', onDocumentMouseMove, false );
document.addEventListener( 'mousedown', onDocumentMouseDown, false );
document.addEventListener( 'mouseup', onDocumentMouseUp, false );

 function onDocumentMouseMove(event) {/*  some code   */}
 function onDocumentMouseDown(event) {/*  some code   */}
 function onDocumentMouseUp(event) {/*  some code   */}

---

现在我的问题是：我需要通过一个按钮分别激活这两个任务功能，例如，如果我单击按钮1，我激活task1的功能，如果我单击按钮2，我激活task2的功能。

只需使用一个简单的标志

var Mode = 1;

function onDocumentMouseClick(event) {
    if(Mode==1){
        /*  some code   */
    }
}

function onDocumentMouseMove(event) {
    if(Mode==2){
        /*  some code   */
    }
}
function onDocumentMouseDown(event) {
    if(Mode==2){
        /*  some code   */
    }
}
function onDocumentMouseUp(event) {
    if(Mode==2){
        /*  some code   */
    }
}

function Button1_Click(){
    Mode=1;
}
function Button2_Click(){
    Mode=2;
}

方法2：

---

您的按钮可以调用与事件侦听器设置相同的函数。快捷而肮脏的方法是将onclick=onDocumentMouseClick写入button1和onclick=onDocumentMouseMove的按钮标签；onDocumentMouseDown；onDocumentMouseUp用于按钮2

但是，为每个按钮编写单独的函数会更简洁。然后，如果任务定义发生更改，则只需更新函数，而无需编辑HTML。下面的代码片段演示了这种方法

请注意，当您单击某个按钮时，除了在任务函数中进行的调用外，还会触发鼠标按下、鼠标向上和鼠标单击事件。因此，您将看到每次单击按钮都会调用多次事件处理程序。要确定事件处理程序是由事件触发还是由任务函数调用，可以检查事件参数的值，如下所示

var messageCounter=0； 函数消息文本{ messageCounter+=1； document.getElementById'messages'.innerHTML=+messageCounter+''+ text++document.getElementById'messages'.innerHTML； } document.addEventListener'click'，onDocumentMouseClick，false； DocumentMouseClickEvent函数{ 消息“onDocumentMouseClick”+ 事件===未定义的“任务”：“事件”+； } //下面的代码用于task2；这三个功能一起工作。 document.addEventListener'mousemove'，onDocumentMouseMove，false； document.addEventListener'mousedown'，onDocumentMouseDown，false； document.addEventListener'mouseup'，onDocumentMouseUp，false； 函数onDocumentMouseMoveevent{ 消息“onDocumentMouseMove”+ 事件===未定义的“任务”：“事件”+； } DocumentMousedOwnEvent上的函数{ 消息“onDocumentMouseDown”+ 事件===未定义的“任务”：“事件”+； } 函数onDocumentMouseUpevent{ 消息“onDocumentMouseUp”+ 事件===未定义的“任务”：“事件”+； } 功能按钮1{ onDocumentMouseClick； } 功能按钮2{ onDocumentMouseMove； onDocumentMouseDown； onDocumentMouseUp； } 按钮1 按钮2

---

还有比这更优雅的方法吗？您可以在单击按钮时取消注册并重新注册事件处理程序，但这不会更优雅…我不理解您的问题。激活功能是什么意思？当用户单击按钮1时，是否要调用onDocumentMouseClick？我是否回答了您的问题？如果是，请接受答案。

function Button1_Click(){
    document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
    document.removeEventListener( 'mousedown', onDocumentMouseDown, false );
    document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
    document.addEventListener('click', onDocumentMouseClick, false);
}
function Button2_Click(){
    document.removeEventListener('click', onDocumentMouseClick, false);
    document.addEventListener( 'mousemove', onDocumentMouseMove, false );
    document.addEventListener( 'mousedown', onDocumentMouseDown, false );
    document.addEventListener( 'mouseup', onDocumentMouseUp, false );
}