mousemove官网,mouse electronics
火狐浏览器的鼠标移动事件怎样写
您好！很高兴为您答疑。
在火狐下，鼠标移动事件本身没有什么特殊的，但是与IE相比较，其事件状态量的捕获略有差异。以坐标获取为例：
obj = obj||window.event;
var x = obj.x || obj.pageX;
var y = obj.y || obj.pageY;
其中obj为您传入事件的主对象，这样才可以正确获取到坐标值。而其他问题，则要具体情况具体分析，还要视您所遇到的问题才能加以解决。
如果对我们的回答存在任何疑问，欢迎继续问询。
echarts tree怎么自定义显示NAME？
echarts tree怎么自定义显示NAME？ueba
关注
echarts自定义节点名称和关系名称 原创
2017-08-18 14:16:20
?
ueba ?
码龄3年
关注
1、效果
echart自带的效果如图，鼠标覆盖到关系边上时，默认显示source target。
?
修改之后可显示自定义的任何内容。
?
2、代码
额……其实就是上一篇的代码，只不过多了一个tooltip，设置自定义显示名称就是在这里。
也可以参考api里的tooltip。
$(function() {
showChart();
});
var myChart;
option = {
title : {
text : '示例'
},
animationDurationUpdate : 1500,
animationEasingUpdate : 'quinticInOut',
//trigger : 'item' 表示数据项图形触发
//triggerOn : 'mousemove' 鼠标覆盖时触发
tooltip : {
trigger : 'item',
triggerOn : 'mousemove',
formatter : function(params) {
//我这里用不到返回值，因此只有params一个参数
//params的含义看后文的说明。
//attribute是我给关系边自定义的一个参数
//所以params.data.attribute只有在关系边里才存在
if (params.data.attribute) {
//如果这个数据有attribute参数，那么返回attribute参数的内容
//这个内容就是提示时显示的内容。
return params.data.attribute;
} else {
//否则显示name参数的内容。
//在关系图里，能进到这里的数据项，应该只有节点和关系两种，所以不是关系就只能是节点……
return params.name;
}
}
},
series : [ {
type : 'graph',
layout : 'force',
data : [],
edges : [],
label : {
emphasis : {
position : 'right',
show : true
}
},
force : {
repulsion : 1000
},
roam : true,
focusNodeAdjacency : true,
lineStyle : {
normal : {
width : 0.5,
curveness : 0.3,
opacity : 0.7
}
},
draggable : true
} ]
};
function showChart() {
myChart = echarts.init(document.getElementById('main'));
myChart.showLoading();
$.ajax({
url : 'echartsDisplay',
type : 'POST',
data : "{}",
dataType : 'json',
success : function(data) {
myChart.hideLoading();
option.series[0].data = data.nodes.map(function(node) {
return {
name : node.name,
itemStyle : {
normal : {
color : node.color
}
},
symbolSize : node.size,
};
});
option.series[0].edges = data.links.map(function(edge) {
return {
source : edge.source,
target : edge.target,
attribute : edge.value,
};
});
myChart.setOption(option, true);
},
error : function(errorMsg) {
alert("请求数据失败!");
}
});
};
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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
params 是多个系列的数据数组。其中每项内容格式同上，并且，
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名，类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
展开全文
Echarts-4.0.4-官方文档-API手册
最新版Echarts-4.0.4的官方文档，包含所有API的介绍。
APP打开
一维非稳态导热热传导Matlab程序
一维非稳态导热热传导Matlab程序，通过此可以解决偏微方程
APP打开
炉温系统的PID控制器设计——MATLAB程序
本文主要研究的课题是：炉温系统的PID控制器设计研究 ，并且在MATLAB的大环境下进行模拟仿真。 (1)第一章 介绍课题的研究背景、意义以及发展现状。 (2)第二章 建立炉温系统数学模型 (3)第三
APP打开
Echart 自定义数据名称
Echart 自定义数据名称 series: [{ name: name, barMaxWidth: “25px”, data: data, label: { normal: { show: true, formatter: function (b,c,d) { if (“1”.indexOf(b.name)-1){ return “有:”+b.value+"("+b.percent+"%)"; } else if (“0”.indexOf(b.name)-1) { return
APP打开
echarts 关系图节点图自定义及关系边上提示内容自定义..._CSDN博客
我要实现的效果图是个一对多的图(多对多类似),echarts官网的数据文件是xml格式,要知道他规定的数据格式可以通过“F12”输出的方式查看转换后的json格式,然后取后...
js多张图片循环平移_ueba的博客-CSDN博客_html三张图片平移
echarts自定义节点名称和关系名称 2425 js多张图片循环平移 2407 最新评论 echarts鼠标覆盖高亮显示节点... weixin_447045 回复 li_xiaomei0921:请问如果要在某个...
ECharts关系图(详细示例——满满的注释)
图表效果如下：具体代码如下：!DOCTYPE html html head meta charset="UTF-8" title关系图案例/title !-- 引入 ECharts 文件 -- script src="js/
APP打开
Echarts的力导图节点怎么自定义
Echarts的力导图节点怎么设置成自定义的图片并且图片样式为圆形，目前只能设置成图片，但是图片是正方形
APP打开
Echarts的graph关系图的节点图片自定义及关系边上的提示框内容自...
基本上的效果图就是这样,graph的每个node的图片都可以自定义,graph有一个symbol...提示框在节点处要显示有关节点的数据,在关系边的时候显示关系边的数据,所以你...
Echarts关系图---注释_滚滚_1016的程序媛-CSDN博客
option = { title: { text: 人民的名义关系图谱 }, tooltip: { formatter: function (x) { return x.data.des; } }, ...
vue+echarts实现力导向图节点自定义样式
Vue+Echarts中力导向图与自定义节点样式展示组装节点数据echarts绘制图片设置属性 效果预览 橘黄色节点为主节点自定样式，其余都是子节点 实现步骤： 附主要逻辑代码 组装节点数据 import userself from '../../../../static/img/user-self.png' import userother from '../../../../static/img/user-other.png' var nodes = Object.values(this.
APP打开
?
echarts 雷达图 指示器名称过长自动换行及其每个名称自定义样式设置
1、echarts 雷达图 指示器名称过长自动换行 效果图： 代码如下： option = { backgroundColor:'white', title: { text: '基础雷达图', show: false, }, tooltip: {}, legend: { data: ['199...
APP打开
echarts鼠标覆盖高亮显示节点及关系名称_ueba的博客-CS..._CSDN博客
修改之后可以既显示节点名称又显示(自定义的)关系名称。 2、代码 html部分就这样。 js代码,使用了jquery和echarts.js,用的是源代码那版,因为待会要进源代码里...
Echarts 实现自定义图片关系图_CPan_的博客-CSDN博客
//echarts图表点击跳转 myChart.on('click',function(params){ if(params.data.id) { varidCard = params.data.link;// 获取被点击节点的身份证号 ...
echarts 关系图，关系连线上如何添加关系文字，谢谢！
![图片说明]() 例如网上这个例子中，如何把“女儿”这个文字添加到连线上，谢谢
APP打开
echarts节点折叠实现
问题描述：工作用到echarts制作图表（graph关系型图），需要实现点击节点后隐藏其节点下的所有的子节点，而echarts官方并没有可用方法使用思路：首先获取点击节点的操作事件，然后获取节点的所有子节点，将这些子节点全部保存在自己定义的一个全局数组变量中，并且将原数组中的这些数据删除（如果不删除原数组的数据，不管怎么设置结果都是图表不发生任何变化，这是一个大坑！！！），然后重新渲染图表；而显示...
APP打开
?写评论?
?
评论
谁能提供网页樱花飘落的背景特效？
背景颜色自己选[推荐][共1步]
====1、以下是这个效果的全部代码。[最好从一个空页面开始]
html
head
meta http-equiv="Content-Type" content="text/html; charset=gb_2312-80"
title新页面 /title
/head
body
script language="JavaScript"
!--
done = 0;
step = 4
function anim(yp,yk)
{
if(document.layers) document.layers["napis"].top=yp;
else document.all["napis"].style.top=yp;
if(ypyk) step = -4
if(yp60) step = 4
setTimeout('anim('+(yp+step)+','+yk+')', 35);
}
function start()
{
if(done) return
done = 1;
if(navigator.appName=="Netscape") {
document.napis.left=innerWidth/2 - 145;
anim(60,innerHeight - 60)
}
else {
napis.style.left=11;
anim(60,document.body.offsetHeight - 60)
}
}
//--
/script
div id="napis"
style="position: absolute;top: -50;
color: #000000;font-family:宋体;font-size:9pt;"
/divscript language="JavaScript"
!--
setTimeout('start()',10);
//--
/script
script language="JavaScript"
!-- Begin
function initArray() {
for (var i = 0; i initArray.arguments.length; i++) {
this[i] = initArray.arguments[i];
}
this.length = initArray.arguments.length;
}
var colors = new initArray(
"#000000","#0000FF","#80FFFF","#80FF80","#FFFF00","#FF8000","#FF00FF","#FF0000"
);
delay = 100
link = 0;
vlink = 0;
function linkDance() {
link = (link+1)%colors.length;
vlink = (vlink+1)%colors.length;
document.linkColor = colors[link];
document.vlinkColor = colors[vlink];
setTimeout("linkDance()",delay);
}
linkDance();
// End --
/script
script
function colors(c1){
this.c1 = c1;
}
a00 = new colors("FFFBD0");
a01 = new colors("FF0000");
a02 = new colors("FF8080");
a03 = new colors("FF8000");
a04 = new colors("FFFF00");
a05 = new colors("000080");
a06 = new colors("0000FF");
a07 = new colors("008000");
a08 = new colors("00FF00");
a09 = new colors("804000");
a10 = new colors("808000");
a11 = new colors("000000");
a12 = new colors("FFFFFF");
a13 = new colors("C0C0C0");
a14 = new colors("408080");
a15 = new colors("808080");
a16 = new colors("D2BF51");
a17 = new colors("44BBE8");
a18 = new colors("C97AB9");
a19 = new colors("A2C97A");
a20 = new colors("804000");
a21 = new colors("6AE6C4");
a22 = new colors("33A3D1");
a23 = new colors("6C9AEE");
function changebg(type){
scheme = type;
document.bgColor = scheme.c1;
timerID=setTimeout('document.bgColor = scheme.c2', document.selector.value * 10);
}
/script
form NAME="selector"
pinput TYPE="button" onClick="changebg(a00)" style="background-color: rgb(255,251,208)"input
TYPE="button" onClick="changebg(a01)" style="background-color: rgb(255,0,0)"input
TYPE="button" onClick="changebg(a02)" style="background-color: rgb(255,128,128)"input
TYPE="button" onClick="changebg(a03)" style="background-color: rgb(255,128,0)"input
TYPE="button" onClick="changebg(a04)" style="background-color: rgb(255,255,0)"input
TYPE="button" onClick="changebg(a05)" style="background-color: rgb(0,0,128)"input
TYPE="button" onClick="changebg(a06)" style="background-color: rgb(0,0,255)"input
TYPE="button" onClick="changebg(a07)" style="background-color: rgb(0,128,0)"input
TYPE="button" onClick="changebg(a08)" style="background-color: rgb(0,255,0)"input
TYPE="button" onClick="changebg(a09)" style="background-color: rgb(128,0,0)"input
TYPE="button" onClick="changebg(a10)" style="background-color: rgb(128,128,0)"input
TYPE="button" onClick="changebg(a11)" style="background-color: rgb(0,0,0)"input
TYPE="button" onClick="changebg(a12)" style="background-color: rgb(255,255,255)"input
TYPE="button" onClick="changebg(a13)" style="background-color: rgb(192,192,192)"input
TYPE="button" onClick="changebg(a14)" style="background-color: rgb(64,128,128)"input
TYPE="button" onClick="changebg(a15)" style="background-color: rgb(128,128,128)"input
TYPE="button" onClick="changebg(a16)" style="background-color: rgb(210,191,81)"input
TYPE="button" onClick="changebg(a17)" style="background-color: rgb(68,187,232)"input
TYPE="button" onClick="changebg(a18)" style="background-color: rgb(201,122,185)"input
TYPE="button" onClick="changebg(a19)" style="background-color: rgb(162,201,122)"input
TYPE="button" onClick="changebg(a20)" style="background-color: rgb(106,230,196)"input
TYPE="button" onClick="changebg(a21)" style="background-color: rgb(194,219,185)"input
TYPE="button" onClick="changebg(a22)" style="background-color: rgb(51,163,209)"input
TYPE="button" onClick="changebg(a23)" style="background-color: rgb(108,154,238)" /p
/form
/body
/html
不停变换的背景颜色[共1步]
====1、将以下代码加入HTML的body/body之间：
body bgColor="#ffffff" onload="chgCol(); pingpong();"
script language="JavaScript"
!-- Hide from JavaScript-Impaired Browsers
var pos = 10;
function initArray() {
this.length = initArray.arguments.length;
for (var i = 0; i this.length; i++) {
this[i] = initArray.arguments[i];
}
}
var col=new initArray("4b","5b","8b","8b");
col[0] = "yellow";
col[1] = "coral";
col[2] = "orange";
col[3] = "red";
col[4] = "greenyellow";
col[5] = "lime";
col[6] = "turquoise";
col[7] = "coral";
col[8] = "blueviolet";
col[9] = "violet";
function chgCol() {
pos++;
if (pos0||pos9) {
pos = 0;
}
document.bgColor = col[pos];
setTimeout("chgCol()",5000);
/* Change above set to every 10 seconds (1000 = 1 sec) If
you wish to speed it up, lower the number. To slow it
down, raise the number. */
}
var yourwords = "不断变化背景色彩";var buffer1=" ";var buffer2=" ";var message1=buffer1+yourwords+buffer2;var dir = "left";var speed =150;function pingpong(){if (dir == "left") { message2=message1.substring(2,message1.length)+" "; window.status=message2; setTimeout("pingpong();",speed); message1=message2; if (message1.substring(0,1) == "*") dir="right"; }else { message2=" "+message1.substring(0,message1.length-2); window.status=message2; setTimeout("pingpong();",speed); message1=message2; if (message1.substring(message1.length-1,message1.length) == "*") dir="left"; }}// --/script
检测浏览器类型并调用不同的背景音乐[修改MIDI文件名][共1步]
====1、将以下代码加入HTML的body/body之间：
SCRIPT LANGUAGE="JavaScript"
!-- Begin
var MSIE=navigator.userAgent.indexOf("MSIE");
var NETS=navigator.userAgent.indexOf("Netscape");
var OPER=navigator.userAgent.indexOf("Opera");
if((MSIE-1) || (OPER-1)) {
document.write("BGSOUND SRC=sound.mid LOOP=INFINITE");
} else {
document.write("EMBED SRC=sound2.mid AUTOSTART=TRUE ");
document.write("HIDDEN=true VOLUME=100 LOOP=TRUE");
}
// End --
/SCRIPT
滚动背景[特别推荐][共1步][IE专用]先在页面中设置好背景图片然后再进行下一步
====1、将以下代码加入HEML的body/body之间：
script language="VBScript"
dim c,numgc
c=-100000
numgc=document.body.sourceIndex
sub SF
c=c+1
Document.all(numgc).style.BackgroundPosition= "0 " c
id=SetTimeOut("SF",16,"VBScript")
end sub
SF
/script
永远居中的背景图片[推荐][共1步][修改图片名称]
====1、将以下代码加入HEML的body/body之间：
STYLE TYPE="text/css"
!--
BODY {background-image: URL(图片名称.gif);
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;}
--
/STYLE
随机显示的背景图片[想别人每次看你页面时背景都不一样吗？][共1步]
====1、将以下代码加入HTML的head/head之间：
script LANGUAGE="JavaScript"
bg = new Array(2); //设定图片数量，如果图片数为3，这个参数就设为2，依次类推
bg[0] = 'bg1.gif' //显示的图片路径，可用http://
bg[1] = 'bg2.gif'
bg[2] = 'bg3.gif'
index = Math.floor(Math.random() * bg.length);
document.write("BODY BACKGROUND="+bg[index]+"");
/script
跟随屏幕移动的图像[推荐]修改图片名称和文字即可][共2步]
====1、将以下代码加入到HEML的head/head之间：
style type="text/css"
#floater {
position: absolute;
left: 500;
top: 146;
width: 125;
visibility: visible;
z-index: 10;
}/style
====2、将以下代码加入到HEML的body/body之间
div ID="floater" style="left: 590px; top: 158px"
p align="center"img SRC="想要显示的图片.gif" alt="图片显示的文字" WIDTH="125" HEIGHT="60"br
font color="#FF8040"图片下面的文字/font/p
/divscript LANGUAGE="JavaScript"
self.onError=null;
currentX = currentY = 0;
whichIt = null;
lastScrollX = 0; lastScrollY = 0;
NS = (document.layers) ? 1 : 0;
IE = (document.all) ? 1: 0;
!-- STALKER CODE --
function heartBeat() {
if(IE) { diffY = document.body.scrollTop; diffX = document.body.scrollLeft; }
if(NS) { diffY = self.pageYOffset; diffX = self.pageXOffset; }
if(diffY != lastScrollY) {
percent = .1 * (diffY - lastScrollY);
if(percent 0) percent = Math.ceil(percent);
else percent = Math.floor(percent);
if(IE) document.all.floater.style.pixelTop += percent;
if(NS) document.floater.top += percent;
lastScrollY = lastScrollY + percent;
}
if(diffX != lastScrollX) {
percent = .1 * (diffX - lastScrollX);
if(percent 0) percent = Math.ceil(percent);
else percent = Math.floor(percent);
if(IE) document.all.floater.style.pixelLeft += percent;
if(NS) document.floater.left += percent;
lastScrollX = lastScrollX + percent;
}
}
!-- /STALKER CODE --
!-- DRAG DROP CODE --
function checkFocus(x,y) {
stalkerx = document.floater.pageX;
stalkery = document.floater.pageY;
stalkerwidth = document.floater.clip.width;
stalkerheight = document.floater.clip.height;
if( (x stalkerx x (stalkerx+stalkerwidth)) (y stalkery y (stalkery+stalkerheight))) return true;
else return false;
}
function grabIt(e) {
if(IE) {
whichIt = event.srcElement;
while (whichIt.id.indexOf("floater") == -1) {
whichIt = whichIt.parentElement;
if (whichIt == null) { return true; }
}
whichIt.style.pixelLeft = whichIt.offsetLeft;
whichIt.style.pixelTop = whichIt.offsetTop;
currentX = (event.clientX + document.body.scrollLeft);
currentY = (event.clientY + document.body.scrollTop);
} else {
window.captureEvents(Event.MOUSEMOVE);
if(checkFocus (e.pageX,e.pageY)) {
whichIt = document.floater;
StalkerTouchedX = e.pageX-document.floater.pageX;
StalkerTouchedY = e.pageY-document.floater.pageY;
}
}
return true;
}
function moveIt(e) {
if (whichIt == null) { return false; }
if(IE) {
newX = (event.clientX + document.body.scrollLeft);
newY = (event.clientY + document.body.scrollTop);
distanceX = (newX - currentX); distanceY = (newY - currentY);
currentX = newX; currentY = newY;
whichIt.style.pixelLeft += distanceX;
whichIt.style.pixelTop += distanceY;
if(whichIt.style.pixelTop document.body.scrollTop) whichIt.style.pixelTop = document.body.scrollTop;
if(whichIt.style.pixelLeft document.body.scrollLeft) whichIt.style.pixelLeft = document.body.scrollLeft;
if(whichIt.style.pixelLeft document.body.offsetWidth - document.body.scrollLeft - whichIt.style.pixelWidth - 20) whichIt.style.pixelLeft = document.body.offsetWidth - whichIt.style.pixelWidth - 20;
if(whichIt.style.pixelTop document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5) whichIt.style.pixelTop = document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5;
event.returnValue = false;
} else {
whichIt.moveTo(e.pageX-StalkerTouchedX,e.pageY-StalkerTouchedY);
if(whichIt.left 0+self.pageXOffset) whichIt.left = 0+self.pageXOffset;
if(whichIt.top 0+self.pageYOffset) whichIt.top = 0+self.pageYOffset;
if( (whichIt.left + whichIt.clip.width) = (window.innerWidth+self.pageXOffset-17)) whichIt.left = ((window.innerWidth+self.pageXOffset)-whichIt.clip.width)-17;
if( (whichIt.top + whichIt.clip.height) = (window.innerHeight+self.pageYOffset-17)) whichIt.top = ((window.innerHeight+self.pageYOffset)-whichIt.clip.height)-17;
return false;
}
return false;
}
function dropIt() {
whichIt = null;
if(NS) window.releaseEvents (Event.MOUSEMOVE);
return true;
}
!-- DRAG DROP CODE --
if(NS) {
window.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN);
window.onmousedown = grabIt;
window.onmousemove = moveIt;
window.onmouseup = dropIt;
}
if(IE) {
document.onmousedown = grabIt;
document.onmousemove = moveIt;
document.onmouseup = dropIt;
}
if(NS || IE) action = window.setInterval("heartBeat()",1);
/script
可以看一下
Web前端工程师应该掌握的英语词汇有哪些?
今天小编要跟大家分享的文章是关于Web前端工程师应该掌握的英语词汇有哪些?熟悉编程工作的小伙伴都知道，英语并不会影响到你找到满意的工作，升职与加薪。但程序员程序员编程是离不开英文和数字表达式的，所以掌握开发过程中常用的英语词汇还是非常重要的。下面小编就来跟大家说一说Web前端工程师在工作中都会遇到哪些英语词汇。让我们一起来学习一下吧~
A:
appendChild放置到某元素最后attribute属性addEventListener添加侦听器assign赋值alert
弹出框append添加appendTo添加到absolute绝对的active活动的，激活的，标记的一个伪类align对齐alpha
透明度，半透明anchor锚记标记是这个单词的缩写anchor锚记a标记是这个单词的缩写arrow箭头auto自动appName程序名
appCodeName程序代号appVersion程序版本appAgent程序代理abs取绝对值array数组
B:
back超过范围的三次方缓动bounce指数衰减的反弹缓动before在...之前blur当输入框失焦的时候触发BOM
全称BrowserObjectModel浏览器对象模型blur失焦bind绑定background背景border边框border边框
banner页面上的一个横条both二者都是clear属性的一个属性值both二者都是clear属性的一个属性值black黑色bottom
底部，是一个CSS属性blink闪烁box盒子block块br换行标记blue蓝色bug软件程序中的错误body主体，一个HTML
标记building建立bold粗体button按钮break中断bool布尔boolean布尔bubble冒泡
C:
cubic三次方的缓动circular圆形曲线的缓动chain当执行一种缓动效果后可以继续使用另一个缓动效果createElement
创建新元素createTextNode创建文本节点childNodes返回子节点cancelBubble删除冒泡click点击事件change
内容发生改变，并失焦后才触发该事件contextmenu右击事件clientX光标相对于该网页的水平位置clientY光标相对于该网页的垂直位置
close关闭当前页面confirm输入框clientWidth获取元素宽度clientHeight获取元素的高度childNodes
获取所有子节点children返回子元素cloneNode复制节点Clone克隆、复制chekbox复选框cell表格的单元格color
颜色center中间，居中connected连接的contact联系child孩子content内容circle圆圈crosshair
十字叉丝class类别css层叠样式表clear清除cursor鼠标指针cm厘米centimeter厘米continue继续
close关闭ceil向上取整charAt获取某位置字符
D:
DOM全称DocumentObjectModel文档对象模型default不执行DOMMouseScroll在火狐浏览器中的滚轮事件
document文件，文档dbclick双击dashed虚线display显示，CSS的一个属decimal十进制division
分区，div就是这个单词的缩写decoration装饰document文档default默认的definition定义dotted点线
double双线design设计do做
E:
exponential指数曲线的缓动elastic指数衰减的正弦曲线缓动error错误过失element元素else否则
F:
focus当输入框聚焦的时候触发firstChild第一个子节点firstElementChild返回第一个标签节点function()
函数father父亲float浮动filter滤镜，过滤器font字体first第一个for在循环语句中的一个保留字fixed固定的
four4个function函数，功能
G:
getAttribute获取属性getElementsByClassName根据class标签获取元素getElementsByName
通过元素的Name属性值getElementById通过元素Id，唯一性getElementsByTagName通过标签名查找元素gif一种图像格式
green绿色gray灰色
H:
history对象host主机height高度hover盘旋;徘徊;犹豫hidden()隐藏hack常用于CSS
中的一些招数，或者类似于偏方的技巧here这里hand手hidden被隐藏head头部home首页height高度horizontal
水平的help帮助hover鼠标指针经过时的效果，或称为“悬停状态”
I:
input当输入的时候实时触发innerHeight内部高度innerWidth内部宽度in从0开始加速的缓动inOut
前半段从0开始加速，后半段减速到0的缓动infinity无线循环insertBefore插入到某元素前image图像inline行内
important重要的inner内部的indent缩进italic意大利体，斜体index索引if如果int：整数
indexOf：判断某字符的首次位置
J:
jpg一种图像格式justify两端对齐justify两端对齐
K:
keyCode按键编码keydown按下按键keyup按下按键抬起
L:
linear匀速lastChild返回最后一个子节点lastElementChild返回最后一个标签节点language语言line
线last最后一个link链接left左边list列表length长度lowercase小写level级别
M:
mouseover移动到元素上mouseout从元素上移开mousemove移动鼠标mousewheel在其他浏览器的滚轮事件
mousedown鼠标按下事件mouseup鼠标抬起事件margin外边距millimeter毫米max最大的min最小的medium
中间model模型menu菜单move移动middle中间
N:
nextElementSibling返回下一个兄弟元素nextSibling返回下一个兄弟节点nextElementSibling
下一个兄弟元素nodeValue节点值nodeType节点类型nodeName标签名称navigation导航none无，不，没有new
新的normal标准number数字null空，空值new新建
O:
outerHeight整个高度outerWIdth整个宽度open打开新页面onscroll窗口滚动事件onresize
窗口大小监听事件onload图片加载事件offsetLeft获取元素距离左侧的距离offsetTop获取元素距离顶部的距离offsetWidth
获取元素自身宽度offsetHeigh获取元素自身高度onload在装载时onclick在点击时ondblclick在双击时
onmouseover在鼠标进入时onmouseout在鼠标离开时onmousemove在鼠标移动时onmousedown在鼠标按下时
onmouseup在鼠标抬起时onkeydown在按键按下时onkeyup在按键抬起时onkeypress在按键时onsubmit在提交时
onchange在改变时onfocus在获得焦点时onblur在失去焦点时onscroll窗口滚动事件onresize窗口大小监听事件out
减速到0的缓动onStart开始事件onComplete完成事件onStop停止事件onUpdate更新事件object对象
optional可选的oblique一种斜体orange橙色one一个outer外面的only仅仅overflow溢出open
打开
P:
previous前一个prevent阻止pageX光标相对于该网页的水平位置pageY光标相对于该网页的垂直位置port端口
protocol协议prompt提示框parentNode返回父级节点parentElementNode获取已知节点的父节点
previousSibling返回上一个兄弟节点previousElementSibling返回上一个兄弟元素password密码position
位置prepend预先padding内边距progress进度point点public公开的pointer指针，指示器purple
紫色position定位，位置pop弹出push压入open打开option选项
Q:
quadratic二次方的缓动quintic五次方的缓动quartic四次方的缓动querySelector根据标签名获取第一个元素
querySelectorAll获取所有标签名的元素
R:
repeat次数remove删除当前节点replaceChild替换节点removeEventListener取消侦听器reload
刷新removeAttribute删除属性removeChild删除父节点的某个子节点radio视频red红色resize重新设置大小
relative相对的right右边repeat重复，平铺row行replacement替换return返回random随机round
取整
S:
sinusoidal正弦曲线的缓动start开始stop停止setinterval时间函数sibling兄弟scrollTop
获取文档滚动高度screenX光标相对于该屏幕的水平位置screenY光标相对于该屏幕的垂直位置setAttribute设置属性
scrollHeight获取文档整体高度scrollTop获取文档滚动高度scrollLeft元素左边界setAttribute设置节点上的属性
submit提交scroll滚动shadow阴影silver银色special特殊的size尺寸square方块solid
固体，实线static静态的solution方案strong强壮，加粗的son儿子style样式span一个HTML标记switch
切换setInterval设置反复性定时器setTimeout设置一次性定时器srcElement源对象，事件源split分割substr
截取字符串substring截取字符串sqrt取开方status状态sort排序slice切片，划分splice铰接，粘接
T:
textContent文本添加文字table表格title标题td单元格的HTML标记top顶部toLowerCase
转换为小写toUpperCase转换为大写text文本tr表格中“行”的HTML标记thick粗的transitional过渡的thin
细的two两个three三个type类型through穿过this这个，当前typeof类型
U:
underline下划线uppercase大写upper上面的url网址
V:
vertical竖直的visited访问过的var定义变量
W:
wrap包裹window窗口white白色width宽度while当...的时候write写入
Y:
yellow黄色
以上就是小编今天为大家分享的关于Web前端工程师应该掌握的英语词汇有哪些?的文章，希望本篇文章能够对正在从事Web前端工作的小伙伴们有所帮助。想要了解更多Web相关知识记得关注北大青鸟Web培训官网哦~
来源：张培跃
JS中事件穿透深度剖析与多种解决方案
最近项目开发过程中，在ios环境下。双击（doubletap）上层元素（固定定位fix），偶尔会触发下层（瀑布流中）路由跳转。
经过部门老大指导，才了解到这个现象叫做“事件穿透”。再此俺决定研究下为什么？
电脑上一般是鼠标操作，即响应的是鼠标事件，包括mousedown、mouseup、mousemove和click事件。
在一次点击行为中，事件的触发过程为：mousedown - mouseup - click 三步。
由于手机上没有鼠标，所以就用触摸事件去实现类似的功能。touch事件包含touchstart、touchmove、touchend
注意手机上并没有tap事件。 一些库例如hamer.js、zepto.js 等等都是通过处理这些原生事件，来定义不同的手势以及tap事件。
在一次点击行为中，事件的触发过程为：touchstart - touchmove - touchend。
有人在PC和手机上对事件做了对比实验，以说明手机对touch事件相应速度快于mouse事件。touchstart -- mouseover(有的浏览器没有实现) -- mousemove(一次) --mousedown -- mouseup -- click --touchend。
浏览器在 touchend 之后会等待约 300ms ，如果没有 tap 行为，则触发 click 事件。 而浏览器等待约 300ms 的原因是，判断用户是否是双击（double tap）行为，双击过程中就不适合触发 click 事件了。 由此可以看出 click 事件触发代表一轮触摸事件的结束。
ps：此处偷一张图
跟局官网描述我们可以看出：触发路由跳转的事件默认为 click
移动端chromiun 和 iOS 9.3＋ 可以用 CSS 属性来阻止元素的双击缩放进而取消点击穿透的延迟：
首先引入库：
调用：
将层的固定定位“降”下来，和下面的router-link都在瀑布流内。
注：此方法只适合部分项目。
由于 click 事件的滞后性，在这段时间内原来点击的元素消失了，于是便“穿透”了。因此我们顺着这个思路就想到，可以给元素的消失做一个fade效果，类似jQuery里的fadeOut，并设置动画duration大于300ms，这样当延迟的 click 触发时，就不会“穿透”到下方的元素了。
同样的道理，不用延时动画，我们还可以动态地在触摸位置生成一个透明的元素，这样当上层元素消失而延迟的click来到时，它点击到的是那个透明的元素，也不会“穿透”到底下。在一定的timeout后再将生成的透明元素移除。