Response title
This is preview!
Delegation with * selector
in Using jQuery
•
5 years ago
I had an odd situation in jQuery Mobile (but JQM is incidental, so posting here). I bound to a vmousedown
event on a page. The purpose is to dismiss any menu shown when the user touches any part of the page.
event on a page. The purpose is to dismiss any menu shown when the user touches any part of the page.
I also have my own "fast button" implementation that uses jQuery Mobile vclick event. It delegates vmousedown, vmouseup, vclick and click to the page.
From the latter, I call event.stopPropagation(); The problem is, this prevents the bound vmousedown from being triggered. It's not absolutely clear from the documentation, but I gather that this will prevent propagation to parents that are bound. But it does not prevent propagation to parents if they delegate the same element. (StopImmediatePropagation() would prevent even delegated callbacks.)
I solve the problem by changing the "dismissal" callback from binding to delegation. But I am using a selector of *, and wonder if this is a bad idea. (Efficiency?)
$page.on('vmousedown', '*', function (event) {
var $target = $(event.target);
var exempt = $target.closest(closeMenuExemptions);
var $saveMenu = $page.find('.save_menu, .save_menu_settings');
if ( !exempt.length || !$saveMenu.hasClass('visible') ) {
$menus.trigger('close-menu');
}
});
$page.on('vmousedown vmouseup vclick click', '.turbo-btn', function (event) {
event.preventDefault();
event.stopPropagation();
...
});
This is not a high-frequency event, so don't have to worry too much about execution time unless it exceeds human reaction time. But this seems an odd delegation, and I don't recall seeing this used anywhere else.
(Yes, I realize that now that it's a delegation I can change: var $target = $(this); )
1