Javascript onclick和ondblclick事件的交换事件_Javascript_Javascript Events_Onclick_Event Handling

Javascript onclick和ondblclick事件的交换事件

javascript

Javascript onclick和ondblclick事件的交换事件,javascript,javascript-events,onclick,event-handling,Javascript,Javascript Events,Onclick,Event Handling,您好，我正在尝试在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

您好，我正在尝试在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()">

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

多谢各位

一个函数就足够了。只需使用

document.getElementById

获取按钮，并根据

booleanFlag

状态更改其

onclick

属性

每次单击

switchEvent

时，您将在控制台中看到按钮的

onclick

属性从

clickFunction（）

更改为

doubleClick（）

，

ondblclick

从

doubleClick（）

更改为

clickFunction（）

，依此类推

var booleanfag=true；
var btn=document.getElementById（'btn'）；
函数switchEvent（）{
if（布尔标志）{
setAttribute（'onclick'，'doubleClick（）'）；
setAttribute（'ondblclick'，'clickFunction（）'）；
booleanFlag=false；
}
否则{
setAttribute（'onclick'，'clickFunction（）'）；
setAttribute（'ondblclick'，'doubleClick（）'）；
booleanFlag=true；
}
控制台日志（btn）；
}
函数clickFunction（）{
log（'onclick'）；
}
函数双击（）{
log（“双击”）；
}

无代码重复选项：

<html>
<body>
    <div id="displayStatus" class="display"></div>
    <input type="button" value="Click Me" onclick="handler(false)" ondblclick="handler(true)">
    <input type="button" value="Switch Event" onclick="switchEvent()">

    <script>
        var isSwitched = false;
        var display = document.getElementById("displayStatus");

        function handler(isDoubleClick) {
            isDoubleClick = (!isSwitched && isDoubleClick) || (isSwitched && !isDoubleClick);
            display.innerHTML = isDoubleClick ? "Double Click" : "Single Click";
        }

        function switchEvent(){
            isSwitched = !isSwitched;
        }
    </script>
</body>
</html>


var isSwitched=false；
var display=document.getElementById（“显示状态”）；
函数处理程序（isDoubleClick）{
isDoubleClick=（！isSwitched&&isDoubleClick）| |（isSwitched&&isDoubleClick）；
display.innerHTML=isDoubleClick？“双击”：“单击一次”；
}
函数switchEvent（）{
isSwitched=！isSwitched；
}

不工作。。。获取错误

“未捕获的TypeError:无法在switchEvent（myjavascript.js:42）读取null的属性'setAttribute'”

@Indrajeet4192，但是您是否更改了

html

代码？我已经在按钮上添加了

id

'btn'以便能够捕捉到它。添加了按钮id。。。。没有得到解决方案。。。我正在尝试不同的方法，但是thanks@Indrajeet4192我已经编辑了我的答案，它必须起作用：）如果没有-请发布你的全部代码，我会看到错误在哪里。

HelloWorld

是我的inex.html，脚本在你的答案之上。不客气。请标记为答案，因为它对您有效。谢谢。@Indrajeet4192此解决方案无效。。。它仅更改正在显示的文本。它不会更改按钮属性。

onclick

函数和

ondblick

函数始终是相同的…@kind用户逻辑很重要，您可以指定一个函数，而不是打印文本

“双击”：“单击”

。

<html>
<body>
    <div id="displayStatus" class="display"></div>
    <input type="button" value="Click Me" onclick="handler(false)" ondblclick="handler(true)">
    <input type="button" value="Switch Event" onclick="switchEvent()">

    <script>
        var isSwitched = false;
        var display = document.getElementById("displayStatus");

        function handler(isDoubleClick) {
            isDoubleClick = (!isSwitched && isDoubleClick) || (isSwitched && !isDoubleClick);
            display.innerHTML = isDoubleClick ? "Double Click" : "Single Click";
        }

        function switchEvent(){
            isSwitched = !isSwitched;
        }
    </script>
</body>
</html>