brython | 笨办法写个连连看-2. 监听鼠标事件
各位前端大佬勿笑话,运维小弟献丑了。
前段事件在【码上掘金】看见大佬使用【文言文】写了一个连连看,于是我也想用【brython】也实现一个连连看。
于是乎,你们就看到这篇文章和这个项目了。
如果大佬们对brython
不是特别了解的话,建议先查看之前写的文章:
【brython | 初始化项目】: juejin.cn/post/715364…
如果大佬们还没有看过连连看如何编写,建议可以先查看写的连连看系列文章:
【brython | 笨办法写个连连看-1.核心功能实现】: juejin.cn/post/716327…
完成一个简单的点击事件
鼠标事件,也称之为Mouse Event
,是指捕获鼠标操作所触发的事件,当然现在智能手机、平板等,在滑动屏幕的时候,也可以一并称之为鼠标事件。
仅需如下数行代码即可完成一个最简单的点击事件注册
from browser import document
from browser import html
btn = html.BUTTON("点击我触发事件")
btn.id = "btn"
document <= btn
def sayHello(ev):
print("hello juejin pdudo" , ev)
document["btn"].bind("click",sayHello)
如上代码,先申请一个按钮,其id
属性赋值为btn
, 接着为该按钮注册一个鼠标点击事件,触发的函数为sayHello
,鼠标事件为click
即为: 在btn
上单击左键松开后会触发事件。
如上案例中,我们将bind
称之为绑定方法,
接着我们运行代码,我们会得到这样的一种效果
代码也已经放到【码上掘金】下面了
鼠标监听事件有哪些
brython
给提供的鼠标事件有哪些呢?我整理为了一个表格,如下:
鼠标事件 | 类型 | 解释 |
---|---|---|
click | 点击事件 | 在监听的元素上单击左键松开后会触发事件 |
dblclick | 点击事件 | 在监听的元素上双击左键松开后会触发事件 |
mouseup | 点击事件 | 在监听的元素上按下鼠标松开后,会触发事件(左键、右键、滚轮都会触发) |
mousedown | 点击事件 | 在监听的元素上按下鼠标会触发事件(左键、右键、滚轮都会触发) |
mouseenter | 移动事件 | 挪到监听的元素上时会触发事件,挪到其子元素时,不会产生的事件 |
mouseleave | 移动事件 | 挪到监听的元素上再挪出来的时会触发事件,挪到其子元素时,不会产生的事件 |
mouseover | 移动事件 | 挪到监听的元素上时会触发事件,挪到其子元素时,也会触发事件 |
mouseout | 移动事件 | 挪到监听的元素上再挪出来的时会触发事件,挪到其子元素再挪出来时,也会触发事件 |
mousemove | 移动事件 | 在监听的元素上移动的时候会触发事件 |
如果学过javascript
的话,会觉得上述点击事件非常熟悉,当然了,brython
的工作原理是将python
代码,通过某种方式,解析为javascript
从而在浏览器中运行。所以说,有些写法和javascript
差别不大。
如果要区分一下的话,可以将其区分为点击事件和移动事件。
点击事件
在上述提供的鼠标事件中,其中click
、dblclick
、mouseup
、mousedown
都是鼠标点击事件。
按照监听键值来区分的话,可以归纳为2类
click
和dbclick
只能监听鼠标左键mouseup
和mousedown
则可以监听到左键、右键以及滚轮
如果按照触发事件来区分的话,也可以归纳为2类
click
和dbclick
以及mouseup
会在鼠标释放后触发事件mousedown
在点击后就触发事件
上述案例中,使用了click
来监听,可以做个实验;证明是松开后触发, 点击后拖到其他区松开再来看反馈。
可以发现,在点击后,拖着鼠标在别的地方松开,是不会触发事件的。
如前面介绍,mouseup
和mousedown
可以监听所有的鼠标按键,那么怎么分辨 左键、右键、以及滚轮呢?
在brython
已经为我们定义好了,在点击事件中,有一个参数是button
,该参数值的意义如下:
- 0: 左键
- 1: 轮滚
- 2: 右键
其他3种监听事件,也写成了案例,放到【码上掘金】上了,可以尝试下
移动事件
点击事件较为简单,而移动事件就较为复杂一点了。
from browser import document
from browser import html
document <= html.DIV(id="div1")
div1 = document["div1"]
div1.style.width = "300px"
div1.style.height = "300px"
div1.style.background = "green"
document <= html.DIV(id="div2")
div2 = document["div2"]
def showInfos(ev):
div2.clear()
div2 <= html.P("x:"+str(ev.x)+" y"+str(ev.y))
document["div1"].bind("mousemove",showInfos)
如上代码监听的是div1
,监听的事件是mousemove
,触发的函数为showInfos
,在其中,我们向div2
输出距离窗口的像素,执行后,可以看到如下效果。
上述案例,也放到了码上掘金上:
在鼠标移动事件中,除了mousemove
在监听的元素上移动就会触发事件,而其他移动事件,也可以分为2个部分,即:
mouseenter
和mouseover
: 只要挪到监听事件上就会触发事件mouseleave
和mouseout
: 挪到监听事件上后在挪出来才会产生事件,即焦点在监听的元素上时不会触发事件,只有挪出来后才会触发事件
哎,可能有小伙伴要问了,挪到监听事件上就会触发事件,那么mouseenter
和mouseover
都能实现,有什么区别呢? 区别是挪到其子元素是否会触发事件,其分为2个部分,如下:
mouseenter
和mouseleave
在挪到其子元素上时,不会触发事件mouseover
和mouseout
在挪到其子元素上时,也会触发事件
mouseenter | 移动事件 | 挪到监听的元素上时会触发事件,挪到其子元素时,不会产生的事件 |
---|---|---|
mouseleave | 移动事件 | 挪到监听的元素上再挪出来的时会触发事件,挪到其子元素时,不会产生的事件 |
mouseover | 移动事件 | 挪到监听的元素上时会触发事件,挪到其子元素时,也会触发事件 |
mouseout | 移动事件 | 挪到监听的元素上再挪出来的时会触发事件,挪到其子元素再挪出来时,也会触发事件 |
mousemove | 移动事件 | 在监听的元素上移动的时候会触发事件 |
为此,写了一个简单的demo
,运行后效果如下:
代码将其放到了【码上掘金】中
鼠标事件属性
除此之外,brython
在点击的时候,提提供了点位(不管是点击事件还是移动事件),具体汇总为表格如下:
属性值 | 含义 |
---|---|
x | 鼠标点位到左边窗口的像素 |
y | 鼠标点位到上边窗口的像素 |
clientX | 在DOM中的X坐标 |
clientY | 在DOM中的Y坐标 |
screenX | 在屏幕中的X坐标 |
screenY | 在屏幕中的Y坐标 |
这个就不写代码演示了,有兴趣的可以运行下这个demo
即可:
from browser import document
from browser import html
from browser import console
document <= html.DIV(id="div1")
div1 = document["div1"]
div1.style.width = "300px"
div1.style.height = "300px"
div1.style.backgroundColor = "red"
def showinfos(ev):
console.log("x:",ev.x," y:",ev.y," clientX:",ev.clientX," clientY:",ev.clientY," screenX:",ev.screenX," screenY:",ev.screenY)
document["div1"].bind("mousemove",showinfos)
连连中如何抓出table
中对应的值
在连连看中,有个前提是地图的制作,因为还没有详细的介绍连连看地图制作,所以这里就初略的介绍一下,来作为继续讲解鼠标事件的铺垫。
在我们brython
实现的连连看中,我们使用的是table
作为各种图案的标配
使用6*6个格子来做一个地图,图示如下
其中 1-6 的数字 假如都是连连看的图案,要如何抓出其中的数值呢? 我们将整个table
都定义为监听属性,在鼠标点击后,我们拿到其中的td
的值即可。
为此,我们可以模拟出一个
代码我放到【码上掘金】了:
现在我们可以取值了,那还有一个问题: 我们如何判断2点到底在哪儿?对于整个table
而言,下标应该是什么呢? 这个就留着下次介绍练练看地图的时候再讲解了。
总结
鼠标监听事件就介绍完咯,总体而言,在一般项目中,我们使用最多的就是click事件了,之前实现的连连看也是使用click事件哦。
好了,快动动你的小手指来试试吧。
本文正在参加「金石计划 . 瓜分6万现金大奖」