Support for passive event listeners

[khaledosman]

VueJS offers a .passive to make an event listener passive to improve performance https://vuejs.org/v2/guide/events.html#main , is there a way to achieve the same with this library?

[keaton-codes-tech]

It looks like all the event listeners are passive by default. I'm trying to find out how to make an event listener active so that I can cancel a touchmove event during scrolling.

[jerrybendy]

Ah.. I just see your issue now... Is this resolved?

[keaton-codes-tech]

Hi jerrybendy,

I ended up just using the native vue v-on:touchmove and v-on:mousemove to get active event listeners instead of the v-touch:moving. I didn't find a way to get active event listeners with your library. If there is a way please let me know.

[jerrybendy]

I don't know what the active event listeners is. I'm not good at English 😓

I think, do you mean, the event object? I visited my code, all events didn't send the original event object . It's a pity...

[keaton-codes-tech]

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

target.addEventListener(type, listener [, options]);

options: passive
A Boolean that, if true, indicates that the function specified by listener will never call preventDefault(). If a passive listener does call preventDefault(), the user agent will do nothing other than generate a console warning.

When I said active event listener I was meaning that the option passive = false is being passed to the event listener so that event.preventDefault() may be called.

[jerrybendy]

When I said active event listener I was meaning that the option passive = false is being passed to the event listener so that event.preventDefault() may be called.

I know every word, but I can't understand this sentence well. 😓 Sorry about that.

As I understand it, you want to change the addEventListener behavior, and adding a passive modifier can solve this, for example v-touch:moving.passive. But the modifier is a Boolean value, we can only passive modifier to enable it and can not set it to false. Or maybe add a disablePassive modifier to disable it 🤪 (I don't know can you understand me. I have tried my best 😅)

[keaton-codes-tech]

Ah yes, you do understand what I am asking. I took your advice to make a disablePassive modifier. It is working for me now, you can check the changes I made here keaton-codes-tech@7b49039

[keaton-codes-tech]

VueJS offers a .passive to make an event listener passive to improve performance https://vuejs.org/v2/guide/events.html#main , is there a way to achieve the same with this library?

To answer the OP, if you look at the code you will see that there is a check if the browser does support passive
var isPassiveSupported = (function() { var supportsPassive = false; try { var opts = Object.defineProperty({}, 'passive', { get: function() { supportsPassive = true; } }); window.addEventListener('test', null, opts); } catch (e) {} return supportsPassive; })();

the boolean returned from this is used to set if the event listener is passive: true or false

[jerrybendy]

Good job! 👍 Could you send a PR to me? I'm very glad to merge it.

[jerrybendy]

@oldbootz I have simplified your code (merge two case branch into one). And release a new version v2.3.0. Thanks a lot