事件触发时的JavaScript激活功能

Question

I wrote some Javascript functions based on event like click ecc. .

This first part of code below is for a particular task1:

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

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

and this code below is for task2,the three functions (onDocumentMouseMove,onDocumentMouseDown,onDocumentMouseUp) work together:

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   */}

Now my issue is: I need to activate separately the two task functions by a button, for example if I click on button1 I activate function for task1 and if I click on button2 I activate functions for task2.

Answer 1

Just use a simple flag...

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;
}

METHOD 2:

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 );
}

Answer 2

Your buttons can call the same functions that you're setting as the event listeners. The quick and dirty way would be to write onclick="onDocumentMouseClick()" into the button tag for button1 and onclick="onDocumentMouseMove();onDocumentMouseDown();onDocumentMouseUp()" for button2.

However, it would be cleaner to write a separate function for each button. Then if the task definitions change, you only have to update the functions instead of editing your HTML. This approach is demonstrated in the code snippet below.

Note that when you click on a button, you're causing mouse-down, mouse-up, and mouse-click events to be fired in addition to the calls that you make in the task function. Thus, you'll see event handlers being called several times per button click. To determine whether an event handler was fired by an event or called by a task function, you can check the value of the event parameter, as demonstrated below.

 var messageCounter = 0; function message(text) { messageCounter += 1; document.getElementById('messages').innerHTML = '<b>'+messageCounter+'</b> ' + text + '<br />' + document.getElementById('messages').innerHTML; } document.addEventListener('click', onDocumentMouseClick, false); function onDocumentMouseClick(event) { message('onDocumentMouseClick (' + (event === undefined ? '<b>TASK</b>' : 'event')+')'); } // The code below is for task2; these three functions work together. document.addEventListener( 'mousemove', onDocumentMouseMove, false ); document.addEventListener( 'mousedown', onDocumentMouseDown, false ); document.addEventListener( 'mouseup', onDocumentMouseUp, false ); function onDocumentMouseMove(event) { message('onDocumentMouseMove (' + (event === undefined ? '<b>TASK</b>' : 'event')+')'); } function onDocumentMouseDown(event) { message('onDocumentMouseDown (' + (event === undefined ? '<b>TASK</b>' : 'event')+')'); } function onDocumentMouseUp(event) { message('onDocumentMouseUp (' + (event === undefined ? '<b>TASK</b>' : 'event')+')'); } function button1() { onDocumentMouseClick(); } function button2() { onDocumentMouseMove(); onDocumentMouseDown(); onDocumentMouseUp(); } 

 <button onclick="button1()">button 1</button> <button onclick="button2()">button 2</button> <div id="messages"></div>