jQuery vue 实现点击图片的左侧右侧触发事件不同

想要实现的效果是点击图片的左侧右侧触发不一样的事件。

思路

1. 首先获取鼠标点击的位置
2. 得到页面的宽度.
3. 宽度 / 2
4. 比较，鼠标点击的位置，与宽度 / 2 的值。判断触发的位置

1. 图片绑定点击事件

<img src="" @click="a" id="Img">

 2. 获取页面中鼠标的点击位置 （这里使用了vue）

a() {
    this.pageX = event.pageX
    },

 3.得到页面的宽度并 / 2

a() {
    this.pageX = event.pageX
    this.clientWidth = document.body.clientWidth / 2
    },

 4.比较点击的位置，判断触发的位置

a() {
	this.pageX = event.pageX
	this.clientWidth = document.body.clientWidth / 2
	if (this.pageX - this.clientWidth < 0) {
			// 事件位置
		} else {
			// 事件位置
	}
},