在另一个框中按Enter键时,防止按钮上的onclick事件触发

Question

我需要#wmd-button-bar在SE编辑器中有一个用户输入字段以及一个按钮.用户可以在输入字段中输入一些数据,然后按下按钮来处理该数据.我正在使用用户脚本来实现这一目标.我创建了一个单独的MVCE,这是它的Tampermonkey/Greasemonkey的直接安装链接.

要重现此问题,请安装userscript.重新加载此页面,然后单击"编辑".您会注意到一个带有按钮的新空白输入框.将"编辑摘要"框空白,将其留空,然后按Enter键.现在,您的插入符号将重点放在新的空白输入框上,而不是提交答案框.

如果您在"问题标题"框中按Enter键也会发生相同的情况.

从console.log消息中,您会注意到MouseClick按钮上有一个事件!这不是预期的行为.事实上,这怎么可能呢？我们只是在编辑摘要框中按Enter键,甚至没有触及新的空白输入或其按钮.它是如何注册鼠标点击的？

如何解决这个问题？

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

---

用户名代码:

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里面的 aform都是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>

您可以参考这个理解的行为<button>和<input type="button">。

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

默认情况下，按钮充当submit类型，除非明确指定（或者submit(default) reset// button）。就跑document.querySelector("#box").children[1].type=button。你会发现它按预期工作。

该行为是跨浏览器相同，在测试Firefox Nightly（开发者版本），Chrome并Safari和工作在一点点不同IE。

你还可以看到点击默认情况下被看到console.log(event.detail)是0因为它是内部触发。当左键单击触发时，它将是1。点击事件的 MDN 文档