turnjs怎么设置翻页事件触发范围 ？

Question

turnjs怎么设置翻页事件触发范围 ？目前只能点击右下角的页脚，才能翻页，我希望是任何区域

看了文档没解决

Answer 1

先上结论：没有现成的 API，但可以手写一个点击监听。如容器元素 width: 100px，点击时判断其点击位置 x 轴位置，x <= 50 时返回上一页，否则进入下一页。

---

有过类似的经历。我是 H5 单页翻页，想做一个滑动手势，也就是手指从右滑到左，就翻下一页。于是写了一个滑动监听：

// * 全局左右滑动翻页
const addSlipHandle = $target => {
    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 < $(this).width() >>> 1 ? "previous" : "next")
      .turn("disable", true);
  });