鼠标和键盘事件案例

导语:之前已经说过了事件的来龙去脉和属性以及方法,今天就说一下鼠标和键盘事件的案例。

温馨提示:

前提是你要引入一个gjs.js文件 https://felab.guanqi.xyz/assets/js/gjs.min.js 才可以运行。

<script src="https://felab.guanqi.xyz/assets/js/gjs.min.js"></script>
1

鼠标和键盘事件:

鼠标和键盘事件就是设备相关的事件,可以使用鼠标和键盘对文档进行操作,触发相应的事件。

# 鼠标事件案例

既然之前已经知道了如何使用鼠标事件,那本节就提出两个案例,来对学过的知识的实践。

本节有两个案例,第一个是有关右击鼠标显示自定义菜单的;第二个是有关如何使用鼠标进行拖拽元素。

# 鼠标右击自定义菜单

  • 原理

  • 当鼠标右键按下后,获取鼠标坐标,然后赋值并且显示菜单元素;

  • 当鼠标左键按下后,隐藏菜单元素;

  • 菜单样式

<ul id="list">
    <li><a href="#menu1">菜单1</a></li>
    <li><a href="#menu2">菜单2</a></li>
    <li><a href="#menu3">菜单3</a></li>
    <li><a href="#menu4">菜单4</a></li>
</ul>
1
2
3
4
5
6
#list {
  margin: 0;
  padding: 0;
  width: 150px;
  height: 240px;
  border: 1px solid #eee;
  box-shadow: 1px 1px 5px #eee;
  list-style: none;
}
#list li {
  width: 150px;
  height: 60px;
  line-height: 60px;
  text-align: center;
}
#list li:hover {
  background-color: #ddd;
}
#list li:hover a {
  color: #333;
}
#list li a {
  display: inline-block;
  width: 100%;
  color: #666;
  text-decoration: none;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
  • 动效js操作
var uls = $g.eid('list');
$g.addEvent(document, 'contextmenu', function (e) {
  $g.prevent(e);
  $g.stoppro(e);
  uls.style.left = e.clientX + 'px';
  uls.style.top = e.clientY + 'px';
  uls.style.display = 'block';
}, false);
$g.addEvent(document, 'click', function () {
  uls.style.display = 'none';
}, false);
1
2
3
4
5
6
7
8
9
10
11

这个案例就到此为止,请点这里 (opens new window)在GitHub上查看效果。

# 元素拖拽示例

  • 原理

  • 1.当点击鼠标,获取到鼠标坐标位置;然后减去元素距离左/上边的距离;

  • 2.当移动元素,获取到元素距离左上的距离;用鼠标的坐标值减去上一步的值;

  • 3.当放开鼠标,禁用鼠标移动事件和按下 事件;

  • 元素和样式

<div class="box"></div>
1
.box {
  position: absolute;
  right: 0;
  top: 0;
  width: 150px;
  height: 150px;
  line-height: 150px;
  background-color: #f00;
  color: #fff;
  font-size: 20px;
  text-align: center;
}
1
2
3
4
5
6
7
8
9
10
11
12
  • js动效
var box = $g.eone('.box');
var box1 = $g.eone('.box1');
new $g.Drag(box);
new $g.Drag(box1);
1
2
3
4

这个案例就到此为止,请点这里 (opens new window)在GitHub上查看效果。

# 键盘事件案例

键盘事件案例一般是用于鼠标事件案例的替代选择,如果用户的设备只支持键盘,就可以使用键盘事件代替是鼠标事件。

大多数事件都是有鼠标事件对应的键盘事件,两个事件都是可以触发同一函数方法的。

这个案例就是模拟聊天窗口,按住Enter键盘键,然后发送聊天内容。

# 聊天窗口模拟案例

  • 原理

当输入框输完内容后,按下键盘上的Enter发送聊天内容。

<div id="box"></div>
<input type="text" name="con" id="con" placeholder="请输入聊天内容">
<button id="send">发送</button>
1
2
3
#box {
  padding: 10px 15px;
  width: 250px;
  height: 400px;
  background-color: #f9f9f9;
  border: 1px solid #eee;
  overflow: auto;
}
#con {
  margin: 10px 0;
  padding: 0 10px;  
  width: 200px;
  height: 30px;
  line-height: 30px;
  color: #333;
}
#send {
  position: relative;
  top: 2px;
  width: 50px;
  height: 35px;
  line-height: 35px;
  border: none;
  border: 1px solid #f8f8f8;
  cursor: pointer;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var box = $g.eid('box');
var con = $g.eid('con');
var send = $g.eid('send');

$g.addEvent(send, 'click', sendCon, false);

function sendCon() {
  if (con.value == '') {
    alert('请输入内容!');
    return;
  }
  box.innerHTML += '<p style="margin:2px auto;">' + con.value + '</p><br>'
  con.value = '';
}

$g.addEvent(con, 'keypress', sendKey, false);

function sendKey(e) {
  var e = e || window.event;
  var code = e.code;
  if (code == 'Enter' || e.keyCode == 13) {
    if (con.value == '') {
      alert('请输入内容!');
      return;
    }
    box.innerHTML += '<p style="margin:2px auto;">' + con.value + '</p><br>'
    con.value = '';
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

如果想看效果,可以点这里 (opens new window)在GitHub上查看。

分享至:

  • qq
  • qq空间
  • 微博
  • 豆瓣
  • 贴吧