解决鼠标单击时与鼠标长安时事件冲突

假设我们想做一个交互效果如下。

默认情况下,有一个APP的图标。

当我们鼠标单击这个图标时,打开APP的home页。

而长按这个APP图标时,图标带有选中状态的阴影,显示删除这个APP的按钮。

按照常规思路,我们只需要给图标的鼠标单击时添加打开home页的链接,鼠标长按图标时选中图标显示删除按钮。

但是这样做完之后,你会发现点击的交互没有问题,但是长按的交互会在长按后触发点击的交互,也就是仍然会打开home页。

这是因为长按时和单击时一样,也有鼠标按下松开的动作,所以导致了问题的出现。

那么,如何解决这个问题呢?

我们可以借助变量加上一个开关,假设启动单击为“0”,禁止单击为“1”。

在【项目】菜单中点击【全局变量】选项,能够看到有一个自带的全局变量“OnLoadVariable”,我们可以直接把它改名为“on_off”。

然后,思路与步骤如下。

1、在图标的【鼠标单击时】的事件中,添加条件,如果变量“on_off”的值不等于“1”,执行打开home页的动作。

条件:

交互:

2、在图标的【属性】中,添加【交互样式设置】,设置【选中】的样式为带有外部阴影,因为是四周阴影,把x与y的偏移值均改为“0”,并且设置模糊为“10”,同时点击颜色设置,将颜色的透明度设置为“60”。通过这样的设置图标被选中时能够改变样式。

3、为删除按钮命名为“Delete”,然后,在图标的【鼠标长按时】事件(在更多事件中)中添加交互,设置选中“当前元件”,并且【显示】删除按钮“Delete”,同时,还要【设置变量值】“on_off”为“1”,因为长按时还未松开鼠标按钮,通过这个变量值的设置就能够避免长按结束时鼠标单击交互被触发(因为在第1步的设置中,变量值不等于“1”才能够执行鼠标单击时的交互)。

4、最后,给【鼠标松开时】事件(在更多事件中)添加交互,因为长按松开后,我们还需要单击恢复为启用状态,所以还要将变量“on_off”的值改为“0”。但是,需要注意,如果直接添加这个动作,可能依然会出现本文开始所描述的问题,这是因为【鼠标松开时】会先于【鼠标单击时】被触发,所以,委托的做法是【设置变量值】的动作延时执行。在【设置变量值】的动作之前,我们添加一个【等待】(在动作列表末尾)“1”毫秒(这个数值只要不影响用户再次操作即可,0也可以,强迫症就让它等一会儿。)的动作即可。

通过以上的处理,我们就能够解决鼠标长按与鼠标单击的冲突,实现想要的交互效果了。

最后,邀请大家关注微信订阅号“iaxure”(二维码在本站首页右上方),及时获取本站最新动态内容。

硬广插入:《两天掌握Axure RP 8》线下培训,北京、上海正在招生,报名地址https://www.axure.com.cn/product/training/。

源文件下载:http://downloads.iaxure.com/click_bug.rp


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师再出新作,倾力打造Axure RP 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。

《AxureRP 8 入门与实战》系列视频------从零入门进阶的最佳课程------【点此查看详情】


转载请注明:Axure原创教程网 » 解决鼠标单击时与鼠标长安时事件冲突

喜欢 (4)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(7)个小伙伴在吐槽
  1. 鼠标松开的时候是否可以加隐藏关闭按钮
    grace2018-05-24 14:54 回复
    • 小楼一夜听春语
      长按就是为了出现关闭按钮,如果松开隐藏还显示出来有什么用呢?
      小楼一夜听春语2018-05-30 21:42 回复
  2. 小楼老师,问一个不相关的问题:您这个pc网站怎么适配成手机端的,手机端是专门做的,还是用什么方法转的?
    yoyi2018-05-24 20:00 回复
    • 小楼一夜听春语
      css
      小楼一夜听春语2018-05-28 14:00 回复
  3. 这个网站怎么登陆
    ts2018-06-11 22:16 回复
  4. 有一个bug,长按之后还是可以点击进入下一个界面,这个怎么处理
    Layne2018-06-13 14:28 回复
    • 可以在长按的事件中,禁用这个按钮,除非点击小×按钮,按钮才恢复启用
      Alia2018-07-12 10:13 回复