我根据点击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的功能。
答案 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;