Javascript在事件触发时激活功能

时间:2014-12-02 19:39:17

标签: javascript

我根据点击ecc等事件编写了一些Javascript函数。

以下代码的第一部分是针对特定任务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   */}

现在我的问题是:我需要通过一个按钮单独激活两个任务功能,例如,如果我点击button1我激活task1的功能,如果我点击button2,我激活task2的功能。

2 个答案:

答案 0 :(得分:0)

只需使用简单的旗帜......

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:

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

答案 1 :(得分:0)

您的按钮可以调用与您设置为事件侦听器相同的功能。快速而肮脏的方法是将onclick="onDocumentMouseClick()"写入button1的button标记和button2的onclick="onDocumentMouseMove();onDocumentMouseDown();onDocumentMouseUp()"

但是,为每个按钮编写单独的函数会更清晰。然后,如果任务定义发生更改,则只需更新功能而不是编辑HTML。这种方法在下面的代码片段中进行了演示。

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



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();
}
&#13;
<button onclick="button1()">button 1</button>

<button onclick="button2()">button 2</button>

<div id="messages"></div>
&#13;
&#13;
&#13;