I need to run tests for Touch and Mouse Events in Jquery, and with a focus on reducing execution cost in performance and trying to simplify code to be visible, simple and fast to handle choices, follow the code:
jQuery(document).on({
'mousedown': function() {
alert("Mouse Click");
},
'touchstart': function() {
alert("Touch Click");
}
}, ".element");div {
width: 150px;
height: 150px;
background-color: #00bcd4;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><divclass="element">Clica Aqui</div> In this example, everything works fine but I repeat all code within mousedown to touchstart I find it unnecessary. I've seen some code doing this:
jQuery(document).on({
'mousedown touchstart': function(event) {
console.log(event.type);
}
}, ".element");div {
width: 150px;
height: 150px;
background-color: #00bcd4;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><divclass="element">Clica Aqui</div> It works but if I hold too much in Event Touch it shows mousedown . So I saw some code to test that who clicks is a device with touch or not:
// Detect Mobile
var mobile = /Windows Phone|Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent.toLowerCase());
var events = {
startClick: (mobile ? "touchstart" : "mousedown"),
moveClick: (mobile ? "touchmove" : "mousemove"),
stopClick: (mobile ? "touchend" : "mouseup")
};
$(document).on(events.startClick, '.element', function(event) {
console.log(event.type);
});div {
width: 150px;
height: 150px;
background-color: #00bcd4;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><divclass="element">Clica Aqui</div>This solution is great and it helps but is wanting for multiple events with Device verification but when I do it does not run. See the code:
// Detect Mobile
var mobile = /Windows Phone|Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent.toLowerCase());
var events = {
startClick: (mobile ? "touchstart" : "mousedown"),
moveClick: (mobile ? "touchmove" : "mousemove"),
stopClick: (mobile ? "touchend" : "mouseup")
};
jQuery(document).on({
'events.startClick': function(event) {
alert("Clicou: " + event.type);
},
'events.stopClick': function(event) {
alert("Saltou: " + event.type);
}
}, ".element");div {
width: 150px;
height: 150px;
background-color: #00bcd4;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><divclass="element">Clica Aqui</div>My problem is this, I do not want to create several functions to solve the problem of not repeating the code, just at the beginning I can indicate the event I need already helps a lot. I use JsHint to clean the code well and it does not care much about the functions because of memory usage.