Question

您好我正在尝试在javascript中交换onclick和ondblclick事件的事件。这是我的HTML页面

<div id="displayStatus"class="display"></div>
<input type="button" value="Click Me" onclick="clickFunction()" ondblclick="doubleClick()">
<input type="button" value="Switch Event" onclick="switchEvent()">

我想要一个“switchEvent（）”函数的脚本来交换 onclick 和 ondblclick 事件。表示点击“切换事件”按钮后 onclick 应该 ondblclick ，反之亦然。

我确实喜欢这个

var booleanFlag = true;

    function clickFunction(){
        if(booleanFlag)
            document.getElementById("displayStatus").innerHTML="Single Click";
        else 
            document.getElementById("displayStatus").innerHTML="Double Click";
    }
    function doubleClick(){
        if(booleanFlag)
            document.getElementById("displayStatus").innerHTML="Double Click";
        else
            document.getElementById("displayStatus").innerHTML="Single Click";
    }

    function switchEvent(){
        if (booleanFlag) {
            booleanFlag=false;
        }
    }

但这会导致代码重复。为此分享任何更好的选择。

谢谢。

Answer 1

一个功能就足够了。只需使用document.getElementById获取按钮，然后根据onclick状态更改其booleanFlag属性。

每次点击switchEvent，您都会在控制台中看到按钮的onclick属性从clickFunction()更改为doubleClick()，ondblclick更改为doubleClick()到clickFunction()等等。

＆＃13;

var booleanFlag = true;
var btn = document.getElementById('btn');

function switchEvent() {
  if (booleanFlag) {
    btn.setAttribute('onclick', 'doubleClick()');
    btn.setAttribute('ondblclick', 'clickFunction()');
    booleanFlag = false;
  }
  else {
    btn.setAttribute('onclick', 'clickFunction()');
    btn.setAttribute('ondblclick', 'doubleClick()');
    booleanFlag = true;
  }
  console.log(btn);
}

function clickFunction(){
  console.log('onclick');
}

function doubleClick(){
  console.log('doubleClick');
}

＆＃13;

<div id="displayStatus" class="display"></div>
<input type="button" id='btn' value="Click Me" onclick="clickFunction()" ondblclick="doubleClick()">
<input type="button" value="Switch Event" onclick="switchEvent()">

＆＃13;

Answer 2

无代码重复选项：

<style type="text/css"> 
    /* thubnail div */
    .thumbnail {overflow: hidden; box-sizing: border-box;}
    /* all images in thumbnail div*/
    .thumbnail img{min-width: 200px; min-height: 123px; width: 200px; height: 123px; max-width: 200px; max-height: 123px; } 
</style>

onclick和ondblclick事件的交换事件

2 个答案: