event.preventDefault() 不起作用答案

【问题标题】：event.preventDefault() not workingevent.preventDefault() 不起作用
【发布时间】：2022-04-09 19:51:27
【问题描述】：

我使用 Telerik Grid 在我的视图中有这行代码：

      columns.Bound(o => o.URI).Width(10).Sortable(false)
                .ClientTemplate("<A class='btnGrid' id=source<#= ID #> onclick=GridSelection.addItem('<#= ID #>') >Add</A>").Title("").Width(50);

GridSelection addItem 和 disableSelected 函数的 JS 代码：

  GridSelection = {
      addItem: function (value) {

         var anchorOption = $("a[id=source" + value + "]");

         anchorOption.click(function (e) { // variable name changed from "event"
               e.preventDefault();
               return false;    // as suggested by mr. Hamdi
               });

         anchorOption.fadeTo("slow", .5);

         GridSelection.disableSelected(anchorOption, true);

         var data = $("#GridSource").data('tGrid').data;
         var selectedObject;
         for (var item in data) {
            if (data[item].ID == value) {
               selectedObject = data[item];
               break;
            }
         }

          var grid = $("#GridSelected").data('tGrid');
          var newData = $("#GridSelected").data('tGrid').dataSource._data;
          newData.push(selectedObject);
          grid.dataBind(newData);
          grid.sort("");
          anchorOption.fadeTo("slow", .5);
      },

      disableSelected: function (element, disable) {
              //false on IEs 6, 7 and 8
              if (!$.support.leadingWhitespace) {
                  if (disable) {
                      $(element).attr('disabled', 'disabled');
                  } else {
                      $(element).removeAttr('disabled');
                  }
              }
     },
         // other GridSelection subfunctions here...

当我在 IE 中运行 MVC3 网络应用程序时，由于 GridSelection.disableSelected 函数，它运行良好，但在 Chrome 和 Mozilla Firefox 中，event.preventDefault(); 没有不行。即使用户已经在其中添加了数据项，锚链接仍然会添加它。

在被阻止的GridSelection.addItemfunction 中包含preventDefault 方法是否可以？

preventDefault 阻止了哪个属性，是 href 还是 onclick？

这有什么问题？我该如何修复这个错误？谁能帮忙？

【问题讨论】：

你有多确定点击处理程序甚至被调用？ anchorOption.fadeTo("slow", .5); 有效吗？
这也是我的冲动之一。我在这里有一个开发人员工具应用程序，用于调试我的应用程序。我在脚本的代码行上添加了断点，以了解它是否通过了这些行并且确实通过了。
@nnnnnn：请在我编辑的帖子中查看我添加的问题。谢谢
您检查过 Mozilla 中的错误控制台吗？有什么错误吗？您能否在e.preventDefault(); 之前添加警告行以确保调用该函数。
您是否忘记在return false 后添加分号。它不应该出错，但值得一试。

标签： javascript jquery asp.net-mvc-3 telerik-grid preventdefault

【解决方案1】：

链接的标记有一个内联点击处理程序，没有href：

<A class='btnGrid' id=source<#= ID #> onclick=GridSelection.verify('<#= ID #>') >Add</A>

如果您试图阻止的是GridSelection.verify()，您应该注意：

内联点击处理程序可能在您的其他事件处理程序之前被调用，这意味着从您的其他处理程序中取消它为时已晚，无论如何
e.preventDefault() 不会阻止其他处理程序运行，它会停止事件的默认操作，即链接导航到 href 属性中指定的 url。而且您没有指定href。

如果你想在同一个元素上为同一个事件有多个处理程序，你应该用 jQuery按照你希望它们被调用的顺序来分配它们，然后在里面使用event.stopImmediatePropagation() method如果您想阻止其余处理程序运行，请选择其中一个处理程序。

鉴于您没有显示您想要阻止的部分代码，我不知道如何将其放入您显示的代码中，但一般原则是：

<a id="myLink" href="someURL">My link</a>

<script>
$("#myLink").click(function(e) {
    // some processing
    if (someCondition)
       e.stopImmediatePropagation();
    // some other processing
});

$("#myLink").click(function(e) {
    // some processing
});
</script>

话虽如此，如果.verify() 函数调用您的.addItem() 函数并且您打算阻止未来点击事件在同一链接上工作，因为第一次点击应该验证/添加，然后您不想再次添加，然后在您的 .addItem() 函数中执行以下操作：

anchorOption.removeAttr("onclick");
// or
anchorOption[0].onclick = null;

【讨论】：

那是准确的。但是我应该把 preventDefault() 放在哪里？我应该把它放在.addItem()still 里面吗？或者我应该把它放在.addItem()之外的另一个事件处理程序中？
对于问题的更新版本，我想说你根本不需要preventDefault() 或stopImmediatePropagation()，也不应该像你一样在addItem() 中创建click 处理程序目前这样做，因为那无济于事。尝试我的答案末尾的代码，看看会发生什么 - 想法是“关闭” existing 点击处理程序，该处理程序是使用 html 中的内联 onclick 属性设置的。跨度>

【解决方案2】：

您是否尝试过添加return false; 而不是event.preventDefault();

【讨论】：

其实可以在event.preventDefault();后面加上return false;声明。你不需要删除event.preventDefault();
谢谢，我已经尝试在我的代码中添加它，但仍然没有任何改变。
这真的很奇怪。我之前遇到过同样的问题并返回false；为我工作。
请看我更新的帖子。我添加了一些困扰我的问题，也许你可以帮我回答。

【解决方案3】：

您是否尝试过重命名事件变量？叫我疯了，但我似乎记得有问题，试试function(e) {e.preventDefault();} 看看会发生什么

【讨论】：

你疯了。（说真的，这也是我的第一个冲动。）
是的。谢谢，但这是我为事件变量使用的名字，但它仍然不起作用。

【解决方案4】：

如果锚点有id，则使用 id 选择器而不是将其用作属性选择器。

改变

$("a[id=source" + value + "]")

到

$("#source" + value)

我并不是说这是问题所在，但您可以尝试更改它。

更新：

event.preventDefault() 阻止浏览器跟随锚元素的href 属性中设置的链接。它不会阻止或停止click 事件。

【讨论】：

谢谢，但这不是问题，因为我在我的其他函数中也使用过这种语法，并且可以使用它。

【解决方案5】：

香草（没有jQuery）中的魔法酱是stopPropagation。为了阻止任何可能的事件冒泡，您通常希望将两者配对。结合起来，您可以同时实现：

防止默认环境/浏览器行为 (preventDefault) 和
不触发附加到 DOM 祖先 (stopPropagation) 的任何其他脚本。

制定最终解决方案：

evt.preventDefault();
evt.stopPropagation();

两者之间的区别已经在here和许多其他地方进行了更详细的讨论。

【讨论】：