javascript - 在不同的框中按 Enter 时防止按钮上的 onclick 事件触发

Question

我需要在 #wmd-button-bar 中有一个用户输入字段SE 编辑器，以及一个按钮。用户可以在输入字段中输入一些数据，然后按下一个按钮来处理该数据。我正在使用用户脚本来实现这一点。我已经创建了一个单独的 MVCE，这是它的 direct install link用于 Tampermonkey/Greasemonkey。

要重现该问题，请安装用户脚本。重新加载此页面，然后单击“编辑”。您会注意到一个带有按钮的新空白输入框。将“编辑摘要”框设为空白，将其留空，然后按 Enter。您的插入符现在不会提交答案框，而是会专注于新的空白输入框。

如果您在“问题标题”框中按 Enter，也会发生同样的情况。

来自console.log消息，您会注意到取而代之的是 MouseClick按钮上的事件!这不是预期的行为。事实上，这怎么可能呢？我们只是在 Edit summary 框中按下 Enter，甚至没有触及新的空白输入或其按钮。它是如何记录鼠标点击的？

如何解决这个问题？

注意: e.preventDefault();按钮内部 onclick处理程序是必要的。否则，当用户按下按钮来处理他们的输入数据时，答案框会提交自己。

---

The Userscript Code :

function createModal(buttonBar){
    var div = document.createElement("div"),
        input = document.createElement("input"),
        btn = document.createElement("button");

    div.id = "box";

    input.type = "text";

    btn.innerHTML = "Button";
    btn.onclick = function(e){
        e.preventDefault();
        console.log("I was called");
        input.focus();
        console.dir(e);
        console.trace();
    };

    div.appendChild(input);
    div.appendChild(btn);

    return div;
}

setInterval(function () {
    var cont = document.querySelector(".wmd-container:not(.processed)"), ul, buttonBar, div;

    if (cont && (ul = cont.querySelector(".wmd-button-bar ul"))) {
        cont.classList.add("processed");

        buttonBar = cont.querySelector("div[id^=wmd-button-bar]");

        div = createModal(buttonBar);
        buttonBar.appendChild(div);
    }
}, 500)

Answer 1

它的默认 HTML 行为。所有 buttons在 form 里面属于 type="submit" .按enter , form 的最新按钮默认情况下，被点击并调用它们的处理程序。为了解决这个问题，按钮是用 type="button" 创建的.

console.log(document.querySelector("#a").type)
console.log(document.querySelector("#b").type)
console.log(document.querySelector("#c").type)

<form>
    <input type="text">
    <button id="a" onclick="console.log('a')">Submit type</button>
    <button id="b" onclick="console.log('b')" type="button">Button type</button>
    <input id="c" type="submit" value="Input Submit type">
</form>

您可以 refer this了解 <button> 的行为和 <input type="button"> .

如果您只是在控制台中 checkin ，document.querySelector("#box").children[1].type它将显示为 submit .

按钮，默认情况下，充当submit类型，除非明确指定(submit(默认)/reset/button )。只需运行 document.querySelector("#box").children[1].type=button .您会发现它按预期工作。

行为在跨浏览器中是相同的，并在 Firefox Nightly 中进行了测试(开发者版)，Chrome和 Safari和 works a little bit different in IE .

您还可以通过查看 console.log(event.detail) 查看默认情况下的点击是0因为它是内部触发的。当通过左键单击触发时，它将是 1 . MDN Docs on click event