Skip to content
This repository has been archived by the owner on Jan 27, 2021. It is now read-only.

增加对点击事件的处理 #45

Merged
merged 7 commits into from
Nov 24, 2017
Merged

增加对点击事件的处理 #45

merged 7 commits into from
Nov 24, 2017

Conversation

journey-ad
Copy link
Contributor

Fixes #43 .

Changes proposed in this pr:

  • 对点击事件单独做了处理

  • 移除了样式 pointer-events: none

@EYHN @xiazeyu

@xiazeyu
Copy link
Collaborator

xiazeyu commented Nov 22, 2017

是这样的Orz
EYHN当时加的pointer-events: none是为了实现一个鼠标指针穿透下层的内容。这样你开DOM看一下,我觉得因为canvas巨大,留白也巨大,如果不穿透,有可能会挡到页面下部的内容。
具体表现为页脚无法使用,无法选定等。

所以你这种直接移除的方法...有待考虑,叫@EYHN来看看吧。我不敢轻易合并..
https://github.com/EYHN/hexo-helper-live2d/blob/master/index.js#L50:L55

我这段代码仅是让鼠标无法框选中canvas,并不能做到穿透..

@journey-ad
Copy link
Contributor Author

原来如此,那么这个问题比看上去还要麻烦一些,或许可以增加一个选项交由用户选择是否启用点击穿透

Copy link
Owner

@EYHN EYHN left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

请保留 pointer-event: none;

以下是我的建议:
鼠标事件的监听可以放在window上

window.addEventListen();

通过 event.clientX event.clientY 获得鼠标位置,
再通过 getClientRects() 函数获取canvas在文档中的位置,判断鼠标是否点击在canvas上

@xiazeyu xiazeyu added this to the 3.0 milestone Nov 24, 2017
@xiazeyu xiazeyu added jsClient(Deprected) Go to https://github.com/xiazeyu/live2d-widget.js enhancement加强 labels Nov 24, 2017
@xiazeyu xiazeyu merged commit cdea4ba into EYHN:master Nov 24, 2017
xiazeyu added a commit that referenced this pull request Dec 1, 2017
增加对点击事件的处理
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
jsClient(Deprected) Go to https://github.com/xiazeyu/live2d-widget.js
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants