jquery的“on click”函数会在按下“enter”键时触发。

Question

jquery的“on click”函数会在按下“enter”键时触发。

6

jQuery(document).ready(function() {
    jQuery(".multipleDataRow").on("click", "[id^='multiremove_']", function() { 
        //code here to delete
    });
});

我希望避免在按下“Enter”键时调用删除功能。

当我聚焦到其他文本框并按下“Enter”键时，此点击功能会触发。

删除按钮位于具有类“multipleDataRow”的容器内。

按下其他字段的“Enter”键时，删除功能会不断触发。

编辑：来自评论的HTML

<div class="multipleDataRow">
  <label class="">Skills</label>
  <div class="">
    <div id="" class="">
      <div id="multiRow_2_Skillset" class="mBtm-5 span8 mLft-0">
        <input type="text" placeholder=".." id="skill" name="skills[]" value="" class="m-wrap" readonly="readonly">
        <select name="data[tmp_experiences[]]" id="tmp_years_exp_2" class="m-wrap" disabled="disabled">
          <option value="1">1</option>
        </select> Yrs&nbsp;
      </div>
      <div id="spanMultiremove_Skillset_2" class="mBtm-5">
        <button id="multiremove_Skillset_2" skillset_skexp="59" class="btn mini red"> remove </button>
      </div>
    </div>
  </div> <!-- Missing in comment -->
</div> <!-- Missing in comment -->

- George Joffin Joy

按键触发了点击事件，还是触发一个按钮来触发点击事件？请展示您的标记。 - David

你是在 .multipleDataRow 的子元素中按下回车键，而该子元素没有以 multiremove_ 开头的 id 吗？那么这个元素是什么类型的，是 textarea/input/button？ - MDEV

是的，按键触发了点击事件，而这应该只在“点击”事件上发生。 - George Joffin Joy

顺便说一下，我会将e作为click功能的一个参数，并在内部检查e.type。 - MDEV

<div class="multipleDataRow"> <label class="">技能</label> <div class=""> <div id="" class=""> <div id="multiRow_2_Skillset" class="mBtm-5 span8 mLft-0"> <input type="text" placeholder=".." id="skill" name="skills[]" value="" class="m-wrap" readonly="readonly"> <select name="data[tmp_experiences[]]" id="tmp_years_exp_2" class="m-wrap" disabled="disabled"> <option value="1">1</option> </select> 年 </div> <div id="spanMultiremove_Skillset_2" class="mBtm-5"> <button id="multiremove_Skillset_2" skillset_skexp="59" class="btn mini red"> 删除 </button> </div> </div> - George Joffin Joy

1

@GeorgeJoffinJoy 请编辑您的原始问题并添加来自您在那里发表的评论的HTML标记。 - Nunners

4个回答

4

这是所有浏览器的设计。这是一项辅助功能，因此不应该被篡改。如果它在您的网站上引起了意外行为，请更改您的HTML标记以解决。

- Rory McCrossan

1

您可以在HTML标记中编写代码，例如：`

`标记。

onkeydown="return (event.keyCode!=13);"

这将防止浏览器的点击事件。

- Nitin Varpe

1

很多人似乎忽略了这一部分：

当我聚焦于其他文本框并按下回车键时，此点击功能会触发。

这只是标准浏览器行为，当输入和按钮在一个表单中时。您可能在提供的代码片段之外也是如此，但对我来说确实是这种情况。

我只是将 <form> 标记更改为 div，因为逻辑已完全通过 jQuery 处理。但 this answer 也有一个有用的提示：

... <button> 元素的默认类型是 "submit"。这意味着如果您在包含此按钮的 <form> 中的任何位置按 Enter，它将自动提交。

TLDR：向您的按钮元素添加 type="button"。

- John Neuhaus

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nunners · Accepted Answer

当焦点在按钮上时，按下Enter键与单击事件的处理方式相同。如Rory所提到的，这是所有浏览器设计的特性。如果您想取消此功能，最终用户可能会对结果不满意，因为它将没有所有标准功能。

要取消此功能，可以检查onkeydown/onkeyup/onkeypress是否发生键盘操作，如果有，则停止单击事件代码的执行。

例如：

var isKeyPress = false;

document.onkeydown = function(event) {
   if (event.keyCode == 13) {
      isKeyPress = true;
   }
}

jQuery(".multipleDataRow").on("click", "[id^='multiremove_']", function() { 
   if (!isKeyPress) {
      //code here to delete
   }
   isKeyPress = false;
});

如果 isKeyPress 的值为true，那么这个代码应该停止点击事件的运行。