jquery“点击”功能在按键“输入”时触发答案

【问题标题】：The jquery "on click" function gets triggered on key press "enter"jquery“点击”功能在按键“输入”时触发
【发布时间】：2013-10-09 13:41:54
【问题描述】：

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

我想避免在按键“输入”时调用删除函数

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

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

删除功能在其他字段上按回车键时不断触发。

编辑：来自评论的 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 -->

【问题讨论】：

是按键触发点击事件，还是触发按钮触发点击事件？显示您的标记。
您是否在没有以multiremove_ 开头的ID 的.multipleDataRow 的孩子中按Enter？那是什么类型的元素，textarea/input/button？
是的，按键触发了点击事件，这应该只发生在“点击”事件上。
仅供参考，我会将e 作为点击函数的参数并在里面，检查e.type
@GeorgeJoffinJoy 请编辑您的原始问题并在此处添加您评论中的 HTML 标记。

标签： jquery

【解决方案1】：

在关注按钮时按下 Enter 键的方式与浏览器处理 click 事件的方式相同。

正如 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，这应该会停止点击事件代码的运行

【讨论】：

@Nunners - 你可以检查输入 keyCode。如果按下任何键一次，您的代码将停止单击事件代码的执行。
@AlokSwain 你说得对，我也忘了在 click 事件处理程序的末尾添加 isKeyPress = false; 行。我添加了对 keyCode 和缺失行的检查。
@Nunners - 谢谢。实际上用谷歌搜索以了解如何使 Enter 键像点击事件一样起作用并看到了这一点。结果我的按钮由于某种原因被包裹在一个不必要的锚标签中，所以一旦我删除一切都很好
我发现的问题是“click”事件是由RETURN“keydown”事件触发的。如果我使用鼠标“按下”一个按钮，那么该按钮会在“mousedown”事件中改变颜色，但直到“mouseup”才会触发“点击”。同样，如果我使用空格键“按下”按钮，那么它会在“keydown”事件中改变颜色，但“click”直到“keyup”才会触发。 RETURN 有什么特别之处，它会触发“keydown”上的“点击”？
这不一定是真的。我在按钮上有一个点击事件。我可以从那个按钮上移开焦点，甚至可以到$(button).blur() ..点击我的文本区域，然后按enter ..点击事件仍然响应。

【解决方案2】：

这是所有浏览器的设计。它是一种辅助功能，因此不应被篡改。

如果它导致您的网站出现意外行为，请更改您的 HTML 标记以解决它。

【讨论】：

【解决方案3】：

您可以简单地在您的 html 代码中编写代码，例如为您的 html 标签编写代码

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

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

【讨论】：

【解决方案4】：

很多人似乎错过了这部分：

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

这只是当输入和按钮在一个表单中时的标准浏览器行为。在提供的 sn-p 之外，您可能就是这种情况，但对我来说绝对是这种情况。

我只是将<form> 标记更改为一个div，因为无论如何逻辑都是通过jQuery 处理的。但是this answer 也有一个有用的掘金：

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

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

【讨论】：