Closed BonBonSlick closed 4 years ago
mirari
commented
4 years ago I need more info to find out the problem, it is better to provide an online example, like this: https://codepen.io/mirari/pen/vjzXJN
I think it might be ImageModal's problem, find the context for $event
BonBonSlick
commented
4 years ago Can not reproduce https://codepen.io/asdasdddd/pen/jOEzojj
Maybe because we do not use vue-modal package?
We do not use a vue-modal package, own simple div with state isHidden. https://codepen.io/asdasdddd/pen/jOEzojj When modal opened, it contains an image only and 2 buttons, toggle fullscreen and close modal As you can see custom Vue directive handles click outside the image to toggle modal, hide the image. In our case, toggle fullscreen is outside of the image. Error is thrown, this is from local env.
{
ref: "fullscreen",
on: {
change: function($event) {
$event.stopPropagation()
return _vm.fullscreenChange($event)
}
}
},It seems we missing something.
// ERROR
<fullscreen @change.stop="fullscreenChange"
// SUCCESS modal window closed because click is outside of image!
<fullscreen @change="fullscreenChange"
// SUCCESS modal window closed because click is outside of image!
<fullscreen :fullscreen.sync="isFullScreen"Solved this way
<fullscreen @change="fullscreenChange"
...
<em @click.stop="hideModalWindow($event)" />
...
v-click-outside="hideModalWindow"
...
hideModalWindow (event) {
if ('EM' !== event.srcElement.tagName) {
this.hideModal();
}
},
BarnabasSzabolcs
commented
2 years ago I have a solution for
[Vue warn]: Error in v-on handler: "TypeError: $event.stopPropagation is not a function"The problem is that "@click" events are often non-native, when emitted from custom components. Hence, $event does not have a stopPropagation function anymore.
Solution: instead of writing this.$emit('click', myData) write
event.data = myData
this.$emit('click', event)This should work if event is a native click event.
If not, then try and go up one level.
Suggestion for fullscreen devs:
If fullscreen does have a @click event then it is a nicer api to provide the native click event so the users can use @click.stop as expected.
mirari
commented
2 years ago I have a solution for
[Vue warn]: Error in v-on handler: "TypeError: $event.stopPropagation is not a function"The problem is that "@click" events are often non-native, when emitted from custom components. Hence, $event does not have a stopPropagation function anymore.
Solution: instead of writing
this.$emit('click', myData)writeevent.data = myData this.$emit('click', event)This should work if
eventis a native click event. If not, then try and go up one level.Suggestion for fullscreen devs:
If fullscreen does have a @click event then it is a nicer api to provide the native click event so the users can use @click.stop as expected.
The way to modify custom components is not a universal approach.
I think you should use @click.native.stop.
BarnabasSzabolcs
commented
2 years ago Your suggestion looked promising, @mirari . I have tried it for my situation right away and it does not work. The reason may be that emitted custom events do not have any native events behind them.
No worries otherwise I don't use vue-fullscreen, I just posted my suggestion since it solves the problem of the OP.
Best of luck, Barney
rdhelms
commented
1 year ago @BarnabasSzabolcs Thanks so much for documenting your solution. We were migrating a component using a custom click event from Vue 2 to Vue 3 and ran into this exact error, and passing the native click event worked like a charm 💯
We track modal window click if it is outside modal content, close modal
The button is outside modal, we have to stopPropagination in order to prevent closing modal and open fullscreen
This way error is thrown