Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
uni-app
提交
293bd1bb
U
uni-app
项目概览
DCloud
/
uni-app
大约 1 个月 前同步成功
通知
702
Star
38705
Fork
3642
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
7
列表
看板
标记
里程碑
合并请求
1
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
uni-app
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
7
Issue
7
列表
看板
标记
里程碑
合并请求
1
合并请求
1
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
293bd1bb
编写于
2月 02, 2021
作者:
inkwalk
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
fixed: click event conflict with dragging, image add draggable attribute.
上级
2535ce7a
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
28 addition
and
1 deletion
+28
-1
src/core/view/components/image/index.vue
src/core/view/components/image/index.vue
+5
-0
src/core/view/mixins/touchtrack.js
src/core/view/mixins/touchtrack.js
+23
-1
未找到文件。
src/core/view/components/image/index.vue
浏览文件 @
293bd1bb
...
...
@@ -7,6 +7,7 @@
<img
v-if=
"contentPath"
:src=
"contentPath"
:draggable=
"draggable"
>
<v-uni-resize-sensor
v-if=
"mode === 'widthFix' || mode === 'heightFix'"
...
...
@@ -39,6 +40,10 @@ export default {
lazyLoad
:
{
type
:
[
Boolean
,
String
],
default
:
false
},
draggable
:
{
type
:
Boolean
,
default
:
true
}
},
data
()
{
...
...
src/core/view/mixins/touchtrack.js
浏览文件 @
293bd1bb
...
...
@@ -8,6 +8,7 @@ const addListenerToElement = function (element, type, callback, capture) {
}
}
},
{
capture
,
passive
:
false
})
}
...
...
@@ -48,6 +49,7 @@ export default {
}
let
$eventOld
=
null
let
hasClickListenerOld
let
hasTouchStart
let
hasMouseDown
addListenerToElement
(
element
,
'
touchstart
'
,
function
(
$event
)
{
...
...
@@ -77,8 +79,20 @@ export default {
return
res
}
})
// 阻止点击事件传播,处理拖拽和点击冲突,鼠标移动则添加监听,停止移动则移除监听
const
clickEventListener
=
this
.
__clickEventListener
=
function
(
$event
)
{
$event
.
preventDefault
()
$event
.
stopPropagation
()
}
const
mouseMoveEventListener
=
this
.
__mouseMoveEventListener
=
function
(
$event
)
{
if
(
!
hasTouchStart
&&
hasMouseDown
&&
$eventOld
)
{
// 存在鼠标移动,则在 document 上添加点击监听(好处是不用管具体使用拖拽的是什么元素)
if
(
!
hasClickListenerOld
&&
(
Math
.
abs
(
x1
-
x0
)
>
2
||
Math
.
abs
(
y1
-
y0
)
>
2
))
{
document
.
addEventListener
(
'
click
'
,
clickEventListener
,
true
)
hasClickListenerOld
=
true
}
// TODO target currentTarget touches changedTouches
const
res
=
fn
(
$event
,
'
move
'
,
$event
.
pageX
,
$event
.
pageY
)
x1
=
$event
.
pageX
...
...
@@ -94,15 +108,23 @@ export default {
return
fn
(
$event
,
'
end
'
,
$event
.
changedTouches
[
0
].
pageX
,
$event
.
changedTouches
[
0
].
pageY
)
}
})
const
mouseUpEventListener
=
this
.
__mouseUpEventListener
=
function
(
$event
)
{
const
mouseUpEventListener
=
this
.
__mouseUpEventListener
=
(
$event
)
=>
{
hasMouseDown
=
false
if
(
!
hasTouchStart
&&
$eventOld
)
{
// 鼠标抬起,存在监听,则 mouseup 结束后移除就监听事件
if
(
hasClickListenerOld
)
{
setTimeout
(()
=>
{
document
.
removeEventListener
(
'
click
'
,
this
.
__clickEventListener
,
true
)
hasClickListenerOld
=
false
},
0
)
}
// TODO target currentTarget touches changedTouches
$eventOld
=
null
return
fn
(
$event
,
'
end
'
,
$event
.
pageX
,
$event
.
pageY
)
}
}
document
.
addEventListener
(
'
mouseup
'
,
mouseUpEventListener
)
addListenerToElement
(
element
,
'
touchcancel
'
,
function
(
$event
)
{
if
(
$eventOld
)
{
hasTouchStart
=
false
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录