Removing jQuery event properties (v8)

Revision 8 of this benchmark created on

Description

event.layerX & event.layerY will be removed from WebKit soon. Every jQuery-bound event handler now logs this warning:

event.layerX and event.layerY are broken and deprecated in WebKit. They will be removed from the engine in the near future.

Screenshot:

See jQuery bug #10531.

It’s possible to prevent jQuery from copying these properties over to its event objects, but what is the fastest way of doing this?

These snippets don’t do exactly the same, but they all have a similar effect: the layerX and layerY properties aren’t copied to jQuery event objects anymore.

Update: Added @dougneiner’s Array#splice snippet.

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

<script type="text/javascript">
var props = $.event.props;
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
join, replace, and split
// reset
$.event.props = ['altKey', 'attrChange', 'attrName', 'bubbles', 'button', 'cancelable', 'charCode', 'clientX', 'clientY', 'ctrlKey', 'currentTarget', 'data', 'detail', 'eventPhase', 'fromElement', 'handler', 'keyCode', 'layerX', 'layerY', 'metaKey', 'newValue', 'offsetX', 'offsetY', 'pageX', 'pageY', 'prevValue', 'relatedNode', 'relatedTarget', 'screenX', 'screenY', 'shiftKey', 'srcElement', 'target', 'toElement', 'view', 'wheelDelta', 'which'];
// remove layerX and layerY
$.event.props = $.event.props.join('|').replace('layerX|layerY|', '').split('|');
ready
Using $.map
// reset
$.event.props = ['altKey', 'attrChange', 'attrName', 'bubbles', 'button', 'cancelable', 'charCode', 'clientX', 'clientY', 'ctrlKey', 'currentTarget', 'data', 'detail', 'eventPhase', 'fromElement', 'handler', 'keyCode', 'layerX', 'layerY', 'metaKey', 'newValue', 'offsetX', 'offsetY', 'pageX', 'pageY', 'prevValue', 'relatedNode', 'relatedTarget', 'screenX', 'screenY', 'shiftKey', 'srcElement', 'target', 'toElement', 'view', 'wheelDelta', 'which'];
// remove layerX and layerY
$.event.props = $.map($.event.props, function(prop) {
  return /^layer/.test(prop) ? null : prop;
});
ready
while loop + delete
// reset
$.event.props = ['altKey', 'attrChange', 'attrName', 'bubbles', 'button', 'cancelable', 'charCode', 'clientX', 'clientY', 'ctrlKey', 'currentTarget', 'data', 'detail', 'eventPhase', 'fromElement', 'handler', 'keyCode', 'layerX', 'layerY', 'metaKey', 'newValue', 'offsetX', 'offsetY', 'pageX', 'pageY', 'prevValue', 'relatedNode', 'relatedTarget', 'screenX', 'screenY', 'shiftKey', 'srcElement', 'target', 'toElement', 'view', 'wheelDelta', 'which'];
// remove layerX and layerY
var props = $.event.props,
    length = props.length;
while (length--) {
  /^layer/.test(props[length]) && delete props[length];
}
ready
ES5 Array#filter
// reset
$.event.props = ['altKey', 'attrChange', 'attrName', 'bubbles', 'button', 'cancelable', 'charCode', 'clientX', 'clientY', 'ctrlKey', 'currentTarget', 'data', 'detail', 'eventPhase', 'fromElement', 'handler', 'keyCode', 'layerX', 'layerY', 'metaKey', 'newValue', 'offsetX', 'offsetY', 'pageX', 'pageY', 'prevValue', 'relatedNode', 'relatedTarget', 'screenX', 'screenY', 'shiftKey', 'srcElement', 'target', 'toElement', 'view', 'wheelDelta', 'which'];
// remove layerX and layerY
$.event.props = $.event.props.filter(function(item) {
  return !/^layer/.test(item);
});
ready
Array#splice
// reset
$.event.props = ['altKey', 'attrChange', 'attrName', 'bubbles', 'button', 'cancelable', 'charCode', 'clientX', 'clientY', 'ctrlKey', 'currentTarget', 'data', 'detail', 'eventPhase', 'fromElement', 'handler', 'keyCode', 'layerX', 'layerY', 'metaKey', 'newValue', 'offsetX', 'offsetY', 'pageX', 'pageY', 'prevValue', 'relatedNode', 'relatedTarget', 'screenX', 'screenY', 'shiftKey', 'srcElement', 'target', 'toElement', 'view', 'wheelDelta', 'which'];
// remove layerX and layerY
if ($.event.props[17] == 'layerX') {
  $.event.props.splice(17, 2);
}
ready
Array#splice with ambiguous location
// reset
$.event.props = ['altKey', 'attrChange', 'attrName', 'bubbles', 'button', 'cancelable', 'charCode', 'clientX', 'clientY', 'ctrlKey', 'currentTarget', 'data', 'detail', 'eventPhase', 'fromElement', 'handler', 'keyCode', 'layerX', 'layerY', 'metaKey', 'newValue', 'offsetX', 'offsetY', 'pageX', 'pageY', 'prevValue', 'relatedNode', 'relatedTarget', 'screenX', 'screenY', 'shiftKey', 'srcElement', 'target', 'toElement', 'view', 'wheelDelta', 'which'];
// remove layerX and layerY
var i;
if ( ~(i = $.inArray('layerX', $.event.props)) ) {
    $.event.props.splice(i, 2);
}
ready
while loop and delete from revision 6
// reset
$.event.props = window.props;
// remove layerX and layerY
var props = $.event.props,
    length = props.length;
while (length--) {
  var el = props[length];
  (el === 'layerX' || el === 'layerY') && delete props[length];
}
ready
for loop and delete from revision 6
// reset
$.event.props = window.props;
// remove layerX and layerY
var props = $.event.props,
    length = props.length,
    i;
for (i = 0; i < length; i++) {
  var el = props[i];
  (el === 'layerX' || el === 'layerY') && delete props[i];
}
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.