如何禁用指针事件，但允许拖动

Question

I'm trying to create a sidebar menu for the mobile web page. My goal is to slide-out side-bar from 25% of screens left edge.

A similar way is used in Materialize frameworks Sidenav

#drag-target is used to receive drag events and slide-out sidebar. Problem is that #drag-target covers part of the content and blocks click/touch events on underlying elements.

I used CSS rule pointer-events: none but this breaks swipe on the element itself.

Is there any way to pass touch/click events through the #drag-target on all underlying elements, except swipe/drag?

Answer 1

As I mentioned in comment, it should work with z-index now here, in my example, you can bring drag-target behind the elements, and in this situation, button action and also swipe action both works perfectly ! check this out, and compare with your code. And do not use pointer-events: none becuase it disable all mouse functions !

 $('button').click(function() { alert('button action!') }); var myElement = document.getElementById('drag-target'); var Hammer = new Hammer(myElement); Hammer.on("swipe", function(ev) { console.log(ev.type) alert('come out and play!') });

 #drag-target { width: 25%; height: 100%; background: transparent; position: fixed; top: 0; left: 0; border-right: 1px solid #d4d4d4; z-index: -1; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js" integrity="sha256-GMd3rFxMDNnM5JQEpiKLLl8kSrDuG5egqchk758z59g=" crossorigin="anonymous"></script> <div id="content"> <p>Lorem</p> <button>Button</button> <div id="drag-target"></div> </div>

Answer 2

As it's not possible to catch events with pointer-events: none applied, I ran to another way by handling events on the whole body and manually sliding side-bar.

After struggling with Hammer.js I came with working side-bar but found out that, Hammer has a little bug with Pan events and sometimes event was giving incorrect delta. So I decided to listen to basic TouchEvents .

Here is the result if it will be helpful to anyone: https://codepen.io/pen/xxbNwmX

PS Test it from Touch-enabled devices or browser emulator

 /** * @class Sidenav * @constructor */ class Sidenav { /** * @param wrapper {String | jQuery} * @param sidenav {String | jQuery} * @param [hitArea] {number} * @param [threshold] {number} */ constructor (wrapper, sidenav, hitArea = .20, threshold = 20) { // settings this.wrapper = wrapper this.sidenav = sidenav this.hitArea = window.innerWidth * hitArea this.threshold = threshold this.width = $(sidenav).width() this.isHitarea = false this._state = 'closed' this.states = 'open closed open-started close-started' this.touchStart = 0 // touch start $(this.wrapper).on('touchstart', (e) => { let touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0] this.touchStart = touch.pageX this.isHitarea = this.touchStart < this.hitArea }) // touch move $(this.wrapper).on('touchmove', (e) => { let touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0] let delta = touch.pageX - this.touchStart this.slide(delta) }) // touch end $(this.wrapper).on('touchend', (e) => { let touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0] let delta = touch.pageX - this.touchStart if (this.state == 'open-started') { this.state = Math.abs(delta) >= this.width / 4 ? 'open' : 'closed' } else if (this.state == 'close-started') { this.state = Math.abs(delta) >= this.width / 4 ? 'closed' : 'open' } }) } /** @param st {String} */ set state (st) { this._state = st // remove all classes $(this.wrapper).removeClass(this.states).addClass(st) } get state () { return this._state } slide (delta) { switch (this.state) { case 'closed': if (this.isHitarea && delta >= this.threshold) { this.state = 'open-started' this.move(delta - this.threshold) } break case 'open-started': this.move(delta - this.threshold) break case 'open': if (delta < 0 && Math.abs(delta) > this.threshold) { this.state = 'close-started' let translate = Math.max(-this.width, delta + this.threshold) this.move(translate, 1) } break case 'close-started': let translate = Math.min(Math.max(-this.width, delta + this.threshold), 0) this.move(translate, 1) break } } move (delta, left = false) { if (left) { $(this.wrapper).css('transform', `translateX(${delta}px)`) } else { $(this.wrapper).css('transform', `translateX(${Math.min(-this.width + delta, 0)}px)`) } } } // run $(function() { let sidenav = new Sidenav('.wrapper', '.sidenav') })

 * { margin: 0; padding: 0 } html,body { width: 100%; height: 100%; overflow: hidden } body { background-color: #202126; font-family: Consolas, sans-serif; color: antiquewhite } .wrapper { position: relative; height: 100%; touch-action: pan-x !important; transform: translateX(-240px) } .wrapper .sidenav { position: fixed; left: 0; top: 0; width: 240px; height: 100%; background-color: antiquewhite; color: #202126; box-sizing: border-box; padding: 10px } .wrapper .content { height: 100%; transform: translateX(240px); padding: 10px; overflow-y: scroll; overflow-x: hidden } .wrapper .content button { padding: 10px } .wrapper.open { transform: translateX(0) !important; transition: transform .2s ease-in-out } .wrapper.closed { transform: translateX(-240px) !important; transition: transform .2s ease-in-out }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="wrapper closed"> <div class="sidenav"> <h2>SIDENAV</h2> </div> <div class="content"> <h2>CONTENT</h2> <p>lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</p> <br> <button onclick="alert('Click click!')">Clickable button</button> <br> <br> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus assumenda consequatur debitis doloribus, dolorum esse incidunt nobis obcaecati omnis possimus quasi, quidem recusandae reiciendis rerum tempora unde velit vitae voluptates.</p> <br> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus assumenda consequatur debitis doloribus, dolorum esse incidunt nobis obcaecati omnis possimus quasi, quidem recusandae reiciendis rerum tempora unde velit vitae voluptates.</p> <br> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus assumenda consequatur debitis doloribus, dolorum esse incidunt nobis obcaecati omnis possimus quasi, quidem recusandae reiciendis rerum tempora unde velit vitae voluptates.</p> <br> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus assumenda consequatur debitis doloribus, dolorum esse incidunt nobis obcaecati omnis possimus quasi, quidem recusandae reiciendis rerum tempora unde velit vitae voluptates.</p> <br> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus assumenda consequatur debitis doloribus, dolorum esse incidunt nobis obcaecati omnis possimus quasi, quidem recusandae reiciendis rerum tempora unde velit vitae voluptates.</p> <br> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus assumenda consequatur debitis doloribus, dolorum esse incidunt nobis obcaecati omnis possimus quasi, quidem recusandae reiciendis rerum tempora unde velit vitae voluptates.</p> <br> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus assumenda consequatur debitis doloribus, dolorum esse incidunt nobis obcaecati omnis possimus quasi, quidem recusandae reiciendis rerum tempora unde velit vitae voluptates.</p> <br> </div> </div>