八戸高専 アドカレ
8日目← →10日目

pointerupイベントを使用するときにはtouch-actionをnoneにする

　スマホ環境などで、pointerdownやpointermoveは発生するのに、pointerupだけ発生しない場合があります。これは、pointerupの代わりにブラウザのズームなどが機能してしまうためです。

　cssのtouch-actionをnoneにしてあげると、ブラウザのズームアクションが起こらなくなり、pointerupが発生するようになります。

<style>
  #flex {
    display: flex;
  }

  #auto {
    background-color: #ce5228;
    touch-action: auto;
  }

  #none {
    background-color: #aeee37;
    touch-action: none;
  }

  #console {
    height: 10rem;
    overflow-y: scroll;
  }
</style>

<div id="flex">
  <div id="auto">&nbsp;touch-action-auto&nbsp;</div>
  <div id="none">&nbsp;touch-action-none&nbsp;</div>
</div>
<div id="console"></div>

<script>
  let csl = document.getElementById("console")
  let a = document.getElementById("auto")
  a.addEventListener("pointerdown", () => {
    csl.innerText += "auto : pointerdown\n"
  })
  a.addEventListener("pointermove", () => {
    csl.innerText += "auto : pointermove\n"
  })
  a.addEventListener("pointerup", () => {
    csl.innerText += "auto : pointerup\n"
  })
  let n = document.getElementById("none")
  n.addEventListener("pointerdown", () => {
    csl.innerText += "none : pointerdown\n"
  })
  n.addEventListener("pointermove", () => {
    csl.innerText += "none : pointermove\n"
  })
  n.addEventListener("pointerup", () => {
    csl.innerText += "none : pointerup\n"
  })
</script>

上記のHTMLをスマホ(又はdevtool)で開いて、autoにしている要素内でドラック動作をしてみると、pointerupが発生しません。

noneにしている要素内でドラック動作をしてみると、pointerupが発生します。

　環境によってはautoでも問題なかったりして、忘れがちなので備忘録として残します。