e.preventDefault(); 有多危险，是否可以用按键/鼠标按下跟踪代替? [英] How dangerous is e.preventDefault();, and can it be replaced by keydown/mousedown tracking?

问题描述

我正在为相当复杂的 CRM 编写跟踪脚本，用于跟踪 Google Analytics 中的表单操作.我正在尝试平衡准确跟踪表单操作的愿望与需要永远不会阻止表单不起作用.

I'm working on a tracking script for a fairly sophisticated CRM for tracking form actions in Google Analytics. I'm trying to balance the desire to track form actions accurately with the need to never prevent a form from not working.

现在，我知道这样做是行不通的.

Now, I know that doing something like this doesn't work.

$('form').submit(function(){
 _gaq.push(['_trackEvent', 'Form', 'Submit', $(this).attr('action')]);
});

DOM 在有机会处理之前卸载.

The DOM unloads before this has a chance to process.

所以，很多示例代码都推荐这样的:

So, a lot of sample code recommends something like this:

$('form').submit(function(e){
e.preventDefault();
var form = this; 
 _gaq.push(['_trackEvent', 'Form', 'Submit', $(this).attr('action')]);
//...do some other tracking stuff...
setTimeout(function(){
form.submit();
}, 400);
});

这在大多数情况下是可靠的，但这让我很紧张.如果在 e.preventDefault(); 和我开始触发基于 DOM 的提交之间发生了什么事怎么办?我完全破坏了表格.

This is reliable in most cases, but it makes me nervous. What if something happens between e.preventDefault();and when I get around to triggering the DOM based submit? I've totally broken the form.

我一直在探索其他一些分析实现，我注意到类似这样的事情:

I've been poking around some other analytics implementations, and I've noticed something like this:

$('form').mousedown(function(){
 _gaq.push(['_trackEvent', 'Form', 'Submit', $(this).attr('action')]);
});
$('form').keydown(function(e){
    if(e.which===13) //if the keydown is the enter key
    _gaq.push(['_trackEvent', 'Form', 'Submit', $(this).attr('action')]);
});

基本上，不是中断表单提交，而是通过假设如果有人按下鼠标或按下 Enter 键来抢占它，然后提交该表单.显然，这会导致一定数量的误报，但它完全消除了 e.preventDefault(); 的使用，在我看来，这消除了我可能阻止表单成功提交的风险.

Basically, instead of interrupting the form submit, preempting it by assuming that if someone is mousing down or keying down on Enter, than that form is submitted. Obviously, this will result in a certain amount of false positives, but it completely eliminates use of e.preventDefault();, which in my mind eliminates the risk that I might ever prevent a form from successfully submitting.

所以，我的问题是:

• 是否可以采取标准表单跟踪代码段并阻止它从永远完全阻止表单从提交?
• 是mousedown/keydown 替代方案可行吗?
• 是否有可能遗漏的提交案例?具体来说，除了鼠标和键盘输入之外还有其他方式提交吗?浏览器是否总是有时间在开始卸载页面之前处理 javascript?

推荐答案

他们在 Googleplex 那边的家伙非常聪明，他们认为总有一天会发生这样的事情，而现在，果然，它发生了.为什么不试试这个:

Them fellers over at that there Googleplex are awful bright and they figgered some day somethin' like this was bound to happen and now, sure enough, it has. Why don't you give this a good try:

$('form').submit(function(e){
  e.preventDefault();
  var form = this; 
  _gaq.push(['_trackEvent', 'Form', 'Submit', $(this).attr('action')]);
  //...do some other tracking stuff...
  _gaq.push(function(){
     form.submit();
    });
  });

那个 _gaq.push thigamajigger 按顺序执行它的元素，所以你应该没问题.

That _gaq.push thigamajigger executes its elements sequentially, so you should be jest fine.

不，我不知道为什么我突然开始这样说话了.

And no, I don't know why I suddenly started talking like this.

这篇关于e.preventDefault(); 有多危险，是否可以用按键/鼠标按下跟踪代替?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！