I have 2 divs. One is the label div, the other one is the input div. When I toggle the label div, the input div is toggling. I am also closing the input div by clicking anywhere on the screen. Everything works fine, but nothing works on an iPhone.
. yoket {
display: none;
}
$(document).mouseup(function(e) {
var label = $("#semt");
var container1 = $("#semt1");
if (label.has(e.target).length === 1) {
if (container1.hasClass("yoket")) {
container1.removeClass("yoket");
} else if (!container1.hasClass("yoket")) {
container1.addClass("yoket");
}
} else if (container1.has(e.target).length === 0) {
container1.addClass("yoket");
}
});
The reason it is not working for mobile(or any touch based device) is because the mouseup event is not fired, Please switch to click and/or touchend events to it. Ideally this should work.
$(document).bind("mouseup touchend",function(e) {
var label = $("#semt");
var container1 = $("#semt1");
if (label.has(e.target).length === 1) {
if (container1.hasClass("yoket")) {
container1.removeClass("yoket");
} else if (!container1.hasClass("yoket")) {
container1.addClass("yoket");
}
} else if (container1.has(e.target).length === 0) {
container1.addClass("yoket");
}
});
Hope this helps!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.