这更像是一个学术问题,而不是我遇到的问题。
我编写了一个为Google Analytics事件跟踪设置点击处理程序的功能。它首先使用命名空间删除任何以前的点击处理程序,以免干扰可能应用的其他点击处理程序。使用jQuery的$.each()
它基本上循环遍历数组中的ID,将category
,action
和label
应用为data-*
属性,并使用类来引用它后面。
然后,它会使用先前设置的data
属性来设置点击处理程序,从而触发Google Analytics事件跟踪。
我的问题基本上是,我可以将此函数绑定到针对所有点击处理程序的.unbind()
或.off()
方法吗? (不是命名空间的)
因此,如果其他人在应用了事件跟踪代码的按钮上取消绑定所有点击处理程序,则setupEventHandlers()
功能会自动运行并重新应用丢失的GA事件跟踪代码?
更新的问题
我原来的问题可能不清楚我想要实现的目标。
所以DOM中有一个按钮。
<input type='submit' value='Confirm' id='confirm-btn'>
一旦DOM准备好, setupEventHandlers()
就会运行,并将事件监听器应用于正在侦听#confirm-btn
事件的click
。另一个函数randomFunction()
决定需要使用#confirm-btn
方法从$.off()
中删除所有事件侦听器。我希望能够允许randomFunction()
删除所有事件侦听器,因为它可能没有命名空间(原因是 x ),然后再次运行setupEventHandlers()
{ {1}}已完成。
考虑到我无法直接编辑HTML,因为它在多个站点中使用,而跟踪代码用于单个实例。
$.off()
答案 0 :(得分:2)
// Save the original .off in a variable
(function(jq_off, recursive) {
// Redefine .off
$.fn.off = function(event, selector, function) {
var save_recursive = recursive;
recursive = true;
// Then call the original $.off
var return_val = jq_off.apply(this, arguments);
recursive = save_recursive;
if (!recursive) {
setupEventHandlers();
}
return return_val;
};
)($.fn.off, false);
您不需要重新定义.unbind
,因为它只是调用.off
。
答案 1 :(得分:0)
我建议您使用data-
标记元素并为其分配一个独立于其他功能的单击侦听器,例如:
HTML:
<a href="http://google.com" data-toggle="GAPush" data-event="_trackEvent" data-action="google"....>..</a>
JS:
$('[data-toggle="GAPush"]').click(function() {
var eventname = $(this).data('name');
var action = $(this).data('action');
//do your login here and read other parameters from data-eventname m use _gapush()
});
如果您需要其他功能,您知道可以拥有无限制的data-
代码元素。
答案 2 :(得分:0)
尝试(此模式)
修改
V2
应该可以利用setInterval
“轮询”事件namespace
是否附加到目标元素
window.setInterval(function() {
$._data($(".js-buttonTracker")[0], "events") != undefined &&
$._data($(".js-buttonTracker")[0], "events")
.click[0].namespace === "eventTrackingHandler"
? $.noop()
: setupEventHandlers()
}, 1000);
V1
HTML
<button>1</button>
<button>2</button>
<button>3</button>
<!-- `data`, `em` for `event` status notifications at jsfiddle -->
<data></data>
<em></em>
JS
$(function () {
setupEventHandlers = function (status) {
if (status === "on") {
// if `events` `off`, turn back `on` by calling `_events()`
_events();
$(window).trigger("mousemove.check");
} else {
$("data").html(status);
};
};
eventsCheck = function () {
$(window).on("mousemove.check", function (e) {
// `target` `elements` ;
// e.g., `.js-buttonTracker`
var el = $("button");
// if `events` attached to `el`,
// check `events` `namespace`
if ($._data($(el)[0], "events") != undefined) {
$.each($._data($(el)[0], "events").click, function (k, v) {
if (v.namespace != "eventTrackingHandler") {
setupEventHandlers("attach `eventTrackingHandler`"
+ " namespace called");
} else {
$("data").html("`eventTrackingHandler`"
+ " namespace attached");
};
});
} else {
// if `events` _not_ attached to `el`,
// turn `events` back `on` by calling
// `setupEventHandlers("on")`
$("data").html("`eventTrackingHandler` namespace `off` ,"
+ " turning back `on` in 1 seconds");
// `setTimeout()` utilized here to show operability,
// alternatively, could call `setupEventHandlers("on")`
// without delay
setTimeout(function () {
setupEventHandlers("on");
}, 1000);
};
});
};
eventsCheck();
_events = function () {
$("button").on("click.eventTrackingHandler", function (e) {
$("em").html("clicked at " + $.now());
// turn `off` `events` for `button`'s when `button`
// having `text` of `"3"` `click`ed,
// simulating the condition
// "if someone else unbinds all click handlers on a button
// that the Event Tracking code is applied to" ,
// "observed" by `eventsCheck()` ,
// which calls `_events()` within `setTimeout()`
if ($(e.target).text() === "3") {
$("button").off("click.eventTrackingHandler");
};
});
};
_events();
});