JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<div id="outer">
    <div id="inner">
        <div id="swiper"></div>
    </div>
</div>

<div id="output">
</div>

CSS

#outer {
    background: #aaaaaa;
    padding: 5px;
}
#inner {
    padding: 5px;
    background: #cccccc;
}
#swiper {
    width: 100px;
    height: 100px;
    background: #ff0000;
}

JavaScript

$('#inner').delegate('#swiper', 'swipeleft swiperight', function(event) {
    //event.stopImmediatePropagation();
    $('#output').append('<p>inner</p>');
});
$('#outer').delegate('#swiper', 'swipeleft swiperight', function(event) {
    event.stopImmediatePropagation();
    $('#output').append('<p>outer</p>');
});