event.preventDefault() 不起作用

Question

我在使用 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 Web 应用程序时，由于 GridSelection.disableSelected 函数，它运行良好，但在 Chrome 和 Mozilla Firefox 中，event.preventDefault(); 不起作用。即使用户已经将数据项添加到锚链接中，锚链接仍然会添加数据项。

在被阻止的 GridSelection.addItem 函数中使用 preventDefault 方法是否可以？

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

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

Answer 1

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

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

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

1. 如果 内联点击处理程序可能在您的其他事件处理程序之前被调用，这意味着从您的其他处理程序中取消它为时已晚，并且在任何情况下
2. e.preventDefault() 都不会不阻止其他处理程序运行，它会停止事件的默认操作，该事件对于链接来说是导航到 href 属性中指定的 url。并且您没有指定 href。

如果您想在同一元素上为同一事件拥有多个处理程序，则应使用 jQuery 按照您希望调用它们的顺序将它们全部分配，然后使用 event.stopImmediatePropagation() 方法 在其中一个处理程序中（如果您想停止其余处理程序）从跑步。

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

<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() 函数，您的目的是阻止未来点击事件在同一链接上工作，因为第一次点击应该验证/add 然后你不想再添加了，然后在您的 .addItem() 函数中执行如下操作：

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

Answer 2

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

Answer 3

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

Answer 4

香草（没有 jQuery）的魔力是 stopPropagation。为了阻止任何可能的事件冒泡，您通常需要将两者配对。组合后，您可以实现以下两个目标：

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

制定最终解决方案：

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

已更详细地讨论了两者之间的区别这里，以及许多其他地方。

Answer 5

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

更改

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

为

$("#source" + value)

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

更新：

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