diff --git a/play/index.js b/play/index.js index 230569d6e..c804cd8b8 100644 --- a/play/index.js +++ b/play/index.js @@ -272,6 +272,30 @@ play("Carousel", module) }, } }) + .add("non-touch slideclick event", { + template: + `
+ + + + + +
`, + components: { + Carousel, + Slide + }, + data() { + return { + slides: images + } + }, + methods: { + onSlideClick(currentDataset) { + this.$log(`Captured non touch slide click event. Current dataset is ${JSON.stringify(currentDataset)}`) + }, + } + }) .add("slideclick event", { template: `
diff --git a/src/Slide.vue b/src/Slide.vue index 33ca843c7..638ec0feb 100644 --- a/src/Slide.vue +++ b/src/Slide.vue @@ -31,7 +31,8 @@ export default { this.$el.addEventListener( this.carousel.isTouch ? "touchend" : "mouseup", - this.onTouchEnd + this.onTouchEnd, + this.onMouseUp ); }, computed: { @@ -103,6 +104,20 @@ export default { this.$emit("slideclick", Object.assign({}, e.currentTarget.dataset)); this.$emit("slide-click", Object.assign({}, e.currentTarget.dataset)); } + }, + + onMouseUp(e) { + // On click for non-touch events only + const X_Axis_Pos = e.clientX; + const X_Axis_Change = this.carousel.dragStartX - X_Axis_Pos; + + if ( + this.carousel.minSwipeDistance === 0 || + Math.abs(X_Axis_Change) < this.carousel.minSwipeDistance + ) { + this.$emit("slideclick", Object.assign({}, e.currentTarget.dataset)); + this.$emit("slide-click", Object.assign({}, e.currentTarget.dataset)); + } } } };