Question

我正在尝试在JavaScript中使用onClick事件并遇到问题。我想创建一个按钮来更改其id，单击处理程序，并在单击时来回切换文本 - 我希望它在第一次单击时成为完全不同的按钮，但在单击时返回到原始按钮第二次。

我的想法是为单击原始按钮编写一个事件处理程序，将其更改为第二个按钮，然后将其放在函数＆＃34; change（）＆＃34;中。我还计划为单击的新按钮编写一个单独的事件处理程序，将其更改为原始按钮，然后将其放入函数＆＃34; changeBack（）＆＃34;。

问题在于，当我单击原始按钮一次时，调用change（）并在其中自动调用changeBack（）当为新按钮定义onClick时正确调用在innerHTML改变之前。我评论了一些原始行并发出警报来说明这种不受欢迎的行为。我认为当创建新按钮时，点击仍然处于活动状态，因此即使从未点击过新按钮，也会强制它调用changeBack（）。对此的任何帮助都会很棒。谢谢。

<script type="text/javascript">
    function change() {
        var x = document.getElementById("button");
        x.id = "alternateButton";
        x.onClick = changeBack();
        x.innerHTML = "Click to Change Me Back";
    }

    function changeBack() {
        var x = document.getElementById("alternateButton");
        alert('hi');
        //x.id = "button";
        //x.onClick = change();
        //x.innerHTML = "Click Me";
    }   
</script>

<button id="button" onClick="change()">Click Me</button>

Answer 1

事件绑定到元素而不绑定到ID属性。单击按钮时，两个处理程序始终都会执行。

同样最好避免使用内联事件处理程序绑定处理程序。

// Find the elemnt
var btn = document.getElementById('button');
// Data attribuet to keep tab of whether it is clicked or not
btn.dataset.clicked = "1";
// Attach event
btn.addEventListener('click', change);

function change() {
    var txt = 'Click to Change Me Back';
    // Will give you the truthy/falsy value
    if(!!this.dataset.clicked) {
        this.dataset.clicked = "";

       // First implementation

    } else {
        this.dataset.clicked = "1";
        txt = "Click Me";

        // The other case
    }
    this.innerHTML = txt;
}

<强> Check Fiddle

Answer 2

Sushanth的上述评论让我开始使用真相测试仪开始走上正轨。然而，鼠标出现了同样的问题 - 它捕获的鼠标比我想要的时间长（即使使用onmousedown）。因此，在创建新按钮时，旧按钮会替换它，因此永远不会看到新按钮。此外，通过更改元素的ID，我遇到了一些非常奇怪的事情，例如程序在我使用警报时完全停止 - 并且在我关闭警报后没有继续，但是当我删除警报时，整个程序运行。我想最好不要单独留下ID，只使用它们作为参考，并使用DOM访问而不是样式标签动态更改样式，并通过引用其他方式使用按钮控制页面的其他部分switch语句中的函数（我对JavaScript很新，所以我不确定它是怎么做的。）

由于这些问题，但Sushanth的评论意见，我使用了两个测试人员：一个按钮当前正在显示，另一个用于按下或释放鼠标。将代码放在标题而不是正文的底部时，我也遇到了一些奇怪的问题。最后，我不得不使用一些自定义属性。我希望这可以帮助任何想要使用按钮在您点击它时来回改变其外观和功能的人。

<button id="button1" onmousedown="transformButton1()" onmouseup="release()">Click Me</button>

<p id="one">One</p>
<p id="two">Two</p>
<p id="three">Three</p>

<script type="text/javascript">
var x = document.getElementById("button1");
x["clicked"] = 0;
x["released"] = 1;

function transformButton1() {
var x = document.getElementById("button1");

if (x["released"] == 1) {
    switch (x["clicked"]) {
        case 0:
            x["clicked"] = 1;
            x["released"] = 0;
            // Other function calls to change other elements on the page, for example:
            document.getElementById("two").innerHTML = "I've Changed!!!!!";
            x.innerHTML = "Click to Change Me Back";
            break;

        case 1:
            x["clicked"] = 0;
            x["released"] = 0;
            // Other function calls to change other elements on the page, for example:
            document.getElementById("two").innerHTML = "Two";
            x.innerHTML = "Click Me";
            break;
        }
    }    
}

function release() {
    document.getElementById("button1")["released"] = 1;
}
</script>

JSFiddle

Javascript更改按钮和onClick问题

2 个答案: