JSFiddle - React, Tailwind, and code Playground

by Omar X

HTML

<div data-role="page">
    <div data-role="content">
        <div class="swipe">
            <p>swipe</p>
            <input type="text" placeholder="swipe" />
        </div>
        <div class="no-swipe">
            <p>No swipe</p>
            <input type="text" placeholder="no swipe" />
        </div>
    </div>
</div>

CSS

.no-swipe, .swipe {
    height: 150px;
    width: 100%;
    text-align: center;
}
.no-swipe {
    background: green;
}
.swipe {
    background: blue;
}

JavaScript

$(document).on("swipeleft swiperight", function (e) {
    if ($(e.target).hasClass("no-swipe") || $(".no-swipe").has(e.target).length) {
        console.log("neglect swipe");
    } else {
        console.log("swipe");
    }
});