Touchstart在目標元素的邊緣導致mousedown

Question

我注意到一個非常奇怪的行爲，也許是一個錯誤。我有一個帶錨和分隔符的垂直菜單。錨具有mousedown，touchstart，指針式的自定義事件處理程序。問題是，當我點擊並且手指同時覆蓋了錨點和分隔符（分隔符更多）時，將執行mousedown事件而不是touchstart。我設法在一個簡單的例子中重現它。 我在android chrome和桌面上使用chrome dev工具觸摸仿真來測試它。只需觸摸錨點和分隔符之間的區域，您將看到瀏覽器註冊了mousedown事件而不是touchstart事件。有人能告訴我什麼是錯的嗎？這是一個錯誤還是我做錯了什麼？ 這隻發生在錨點，如果有段落而不是錨點，它不會發生。

下面是示例： http://jsbin.com/huhariluva/edit?js,console,output

Answer 1

邊緣不支持觸摸事件。所以touchstart什麼也不做，並且preventDefault從不被調用，所以mousedown被執行。您可以使用指針事件，並使用PEP爲chrome和其他瀏覽器進行polyfill填充。

指針事件：https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent

PEP：https://github.com/jquery/PEP

Answer 2

我設法解決這個問題。解決方法是將touchstart事件偵聽器添加到被單擊的其他元素，並導致該bug並從那裏調用event.preventDefault（）。

我也提交了鉻缺陷跟蹤器的bug。