When an element with a registered taphold event is cloned with withDataAndEvents set to true, the new element fires taphold events 750ms after clicking or touching the element, even if you release the mouse/finger. Here's an example:
<!doctype html>
<head>
<meta name="viewport" content="initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(function(){
// Add a taphold event to the first box
$( "div.box" ).bind("taphold", function ( event ){
console.log("Taphold:");
console.log(event);
$( event.target ).addClass( "taphold" );
}
);
// Clone the box including its event handlers and put it at the
// bottom of the page.
$("div.box").clone(true).appendTo("div.main");
});
</script>
<style>
div.box {
width: 3em;
height: 3em;
background-color: #108040;
}
div.box.taphold {
background-color: #7ACEF4;
}
</style>
</head>
<body>
<div class="main">
<h3>Original box, works correctly:</h3>
<div class="box"></div>
<h3>Cloned box, taphold event fires even if finger/mouse is released:</h3>
</div>
</body>
This is based off of the taphold documentation's example. It shows two green squares. The first was created normally and has a taphold event registered, and works correctly: tapping the square does nothing, but holding for 750ms fires the event, changes its color, and prints to the console. The second square is deep cloned off the first, with the event handlers cloned as well. When you tap the second square, it changes color 750ms later, even if you release your finger or mouse. Furthermore, if you hold the mouse down for 750ms, the event fires twice, but if you release early, only one event is fired.
I tested this on Chromium 59.0.3071.109 and Firefox 54.0 on XUbuntu 16.04; Chrome 59.0.3071.115 on Windows 10; and Chrome 59.0.3071.125 on Android 6.0.0. The behavior was identical on every device.
This uses jquery version 1.11.1 and jquery-mobile version 1.4.5.
With some initial debugging, I found that the first box has one vmousedown event handler, but the second box has two vmousedown handlers. This seems problematic because they will both register the taphold event to fire in 750ms, but when the mouse is released, only one of the events will be unregistered.
When an element with a registered taphold event is cloned with
withDataAndEventsset totrue, the new element fires taphold events 750ms after clicking or touching the element, even if you release the mouse/finger. Here's an example:(Similar code can be found at http://jsbin.com/xicevifuti/edit?html,output)
This is based off of the taphold documentation's example. It shows two green squares. The first was created normally and has a taphold event registered, and works correctly: tapping the square does nothing, but holding for 750ms fires the event, changes its color, and prints to the console. The second square is deep cloned off the first, with the event handlers cloned as well. When you tap the second square, it changes color 750ms later, even if you release your finger or mouse. Furthermore, if you hold the mouse down for 750ms, the event fires twice, but if you release early, only one event is fired.
I tested this on Chromium 59.0.3071.109 and Firefox 54.0 on XUbuntu 16.04; Chrome 59.0.3071.115 on Windows 10; and Chrome 59.0.3071.125 on Android 6.0.0. The behavior was identical on every device.
This uses jquery version 1.11.1 and jquery-mobile version 1.4.5.
With some initial debugging, I found that the first box has one vmousedown event handler, but the second box has two vmousedown handlers. This seems problematic because they will both register the taphold event to fire in 750ms, but when the mouse is released, only one of the events will be unregistered.