背景
在做一個拖動應用圖片排序的場景下,在android
、iOS
、chrome模擬移動設備
的情況,應用圖片用的是svg,大概率會出現ghost元素不消失,也不觸發end事件的詭異情況。
注意
PC端使用chrome 調試模式下,不開啓模擬移動設備不會出現這種情況,開啓來模擬移動設備也會出現。
使用的是vue
+ vuedraggable
實現。效果如下圖:
解決辦法
給svg
元素設置一個css
樣式,即可;
svg {
pointer-events: none;
}
原因分析
根據上面出現,沒有觸發end事件,查看sortablejs源代碼,可以看到sortablejs是通過監聽類似:touchend
,mouseup
,pointerup
類似這樣的事件,認爲拖動結束,從而完成後續動作,移除ghost元素,並觸發end事件。
分析步驟:
- 在chrome 調試下監聽上面的三個
touchend
,mouseup
,pointerup
,發現只要出現上面的情況,這些事件都不會觸發。從而可以判斷是原來瀏覽器沒有觸發事件 - 在頁面是移除圖標,再此拖動,發現可以正常拖動排序。從而判斷問題出現在圖標上,圖標使用的svg。
- 看瀏覽器性能面板,是不是拖動svg會造成大量渲染,從而導致瀏覽器卡頓,從而沒有觸發上面的事件,經過實驗,並不是這個原因
- 猜測鼠標移動svg上,因爲svg本身就具有動畫的效果,是不是和外面的事件衝突,阻擋了事件觸發,實驗在svg上用絕對定位放了一個空白的元素,發現問題解決。在這個思路上繼續找相關的答案,找到css屬性
pointer-events
pointer-events
【 CSS 屬性指定在什麼情況下 (如果有) 某個特定的圖形元素可以成爲鼠標事件的 target" 】。具體參考 pointer-events MDN的說明。
語法:
pointer-events屬性被指定爲從下面的值列表中選擇的一個關鍵字。
值
- auto
與pointer-events屬性未指定時的表現效果相同,對於SVG內容,該值與visiblePainted效果相同 none
元素永遠不會成爲鼠標事件的target。但是,當其後代元素的pointer-events屬性指定其他值時,鼠標事件可以指向後代元素,在這種情況下,鼠標事件將在捕獲或冒泡階段觸發父元素的事件偵聽器。- visiblePainted
只適用於SVG。元素只有在以下情況纔會成爲鼠標事件的目標:
visibility屬性值爲visible,且鼠標指針在元素內部,且fill屬性指定了none之外的值
visibility屬性值爲visible,鼠標指針在元素邊界上,且stroke屬性指定了none之外的值 - visibleFill
只適用於SVG。只有在元素visibility屬性值爲visible,且鼠標指針在元素內部時,元素纔會成爲鼠標事件的目標,fill屬性的值不影響事件處理。 - visibleStroke
只適用於SVG。只有在元素visibility屬性值爲visible,且鼠標指針在元素邊界時,元素纔會成爲鼠標事件的目標,stroke屬性的值不影響事件處理。 - visible
只適用於SVG。只有在元素visibility屬性值爲visible,且鼠標指針在元素內部或邊界時,元素纔會成爲鼠標事件的目標,fill和stroke屬性的值不影響事件處理。 - painted
只適用於SVG。元素只有在以下情況纔會成爲鼠標事件的目標:
鼠標指針在元素內部,且fill屬性指定了none之外的值
鼠標指針在元素邊界上,且stroke屬性指定了none之外的值
visibility屬性的值不影響事件處理。 - fill
只適用於SVG。只有鼠標指針在元素內部時,元素纔會成爲鼠標事件的目標,fill和visibility屬性的值不影響事件處理。 - stroke
只適用於SVG。只有鼠標指針在元素邊界上時,元素纔會成爲鼠標事件的目標,stroke和visibility屬性的值不影響事件處理。 - all
只適用於SVG。只有鼠標指針在元素內部或邊界時,元素纔會成爲鼠標事件的目標,fill、stroke和visibility屬性的值不影響事件處理。
根據上面的屬性說明,可以看到默認的情況下,svg:visiblePainted,我們使用的svg是從sketch
軟件導出的,裏面確實包含fill
, stroke
屬性,最終我們選擇粗暴的方式,設置爲 “none”
解決。
示例svg
<?xml version="1.0" encoding="UTF-8"?>
<svg width="60px" height="60px" viewBox="0 0 60 60" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
<title>形狀結合</title>
<desc>Created with Sketch.</desc>
<g id="工作臺" stroke="none" stroke-width="1" fill-rule="evenodd">
<g id="3-1工作臺" transform="translate(-626.000000, -568.000000)">
<g id="編組-36" transform="translate(43.000000, 549.000000)">
<g id="編組-20" transform="translate(3.000000, 0.000000)">
<g id="youjian" transform="translate(562.000000, 1.000000)">
<g id="編組-21">
<g id="youjian" transform="translate(18.000000, 18.000000)">
<path d="M4.99995326,20.244 L28.3583213,31.4139931 C28.8205574,31.6350244 29.3264899,31.6819953 29.7962042,31.5752545 C30.3767838,31.8438191 31.0647942,31.8560532 31.6763236,31.563633 L31.6763236,31.563633 L55.0339533,20.394 L55.0346,45.252 C55.0346,49.8911919 51.2737919,53.652 46.6346,53.652 L13.4,53.652 C8.7608081,53.652 5,49.8911919 5,45.252 L4.99995326,20.244 Z M46.6346,6 C51.2737919,6 55.0346,9.7608081 55.0346,14.4 L55.0349184,17.0342857 C54.4239245,16.6890913 53.664156,16.6447522 52.9957553,16.964367 L52.9957553,16.964367 L30.1739533,27.8765471 L7.03888956,16.8147272 C6.37077757,16.4952504 5.61137681,16.5394132 5.00051835,16.8841987 L5,14.4 C5,9.7608081 8.7608081,6 13.4,6 L46.6346,6 Z" id="形狀結合"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>