turnjs怎么设置翻页事件触发范围 ？-灵析社区
时光旅人turnjs怎么设置翻页事件触发范围 ？目前只能点击右下角的页脚，才能翻页，我希望是任何区域 看了文档没解决
加班使我熟睡先上结论：没有现成的 API，但可以手写一个点击监听。如容器元素 "width: 100px"，点击时判断其点击位置 "x" 轴位置，"x {
let isLevelShift = false;
let startX = 0;
let startY = 0;
$target
.on(
'touchmove',
'.book-case-item-content',
e => {
if (isLevelShift) {
return;
}
e.stopPropagation();
}
)
.parent()
.on('touchstart', e => {
isLevelShift = true;
startX =
e.originalEvent.changedTouches[0]
.clientX;
startY =
e.originalEvent.changedTouches[0]
.clientY;
})
.on('touchmove', e => {
if (!isLevelShift) {
return;
}
const x =
e.originalEvent.changedTouches[0]
.clientX;
const y =
e.originalEvent.changedTouches[0]
.clientY;
// 对比 X 轴与 Y 轴偏移量，判断该操作是否为水平滑动
if (
Math.abs(y - startY) >
Math.abs(x - startX)
) {
isLevelShift = false;
return;
}
const offset = e.target.clientWidth / 4;
if (x - startX > offset) {
$book.turn('previous');
isLevelShift = false;
}
if (startX - x > offset) {
$book.turn('next');
isLevelShift = false;
}
})
.on('touchend', () => {
isLevelShift = false;
});
};
***
更新：
一个简易的 Demo：
$("#magazine")
.turn({
display: "single",
acceleration: true,
gradients: !$.isTouch,
elevation: 50,
when: {
turned: function (e, page) {
/*console.log('Current view: ', $(this).turn('view'));*/
},
},
})
.turn("disable", true)
.on("click", function (event) {
$(this)
.turn("disable", false)
.turn(event.offsetX >> 1 ? "previous" : "next")
.turn("disable", true);
});