禁止选中文字
$('body').css("user-select",'none').css("-webkit-user-drag",'none')
$('body').css("user-select",'auto').css("-webkit-user-drag",'auto')
事件分为捕获阶段和冒泡阶段， 点击事件总是最大的元素先捕获，然后向子元素分配，最后到达真正点击的元素。然后就是冒泡阶段，从小到大依次触发。
触发顺序
如果设置了position属性（值不为static），对应的节点将脱离文本流，漂浮（覆盖）在其他节点上边。所以设置position属性能提升节点的显示等级。
3.如果所有节点都定义了相同的position，例如absolute。但没有设置z-index属性，节点将按出现的顺序依次覆盖前面节点重叠的部分，遵循“后来居上”原则。
原文链接：https://blog.csdn.net/rocketleopard/article/details/9770423
z-index
默认为0
如果为正数，则离用户更近，为负数则表示离用户更远。
不继承，子类可以用z-inde:inherit;主动继承
只在position时relative和absolate的元素上生效。
z-index 只是同级的元素之间的堆叠， 突破不了父级元素的限制。看java-code里的示例
父元素的兄弟元素一定在此元素所有子元素的上方或下方，具体看父元素的z-index
设置成 z-index:auto 突破这个限制
在其他浏览器中(默认chrome）的默认值为auto，不参与到层级元素的比较，其设置了z-index的子节点直接跳过“从父规则”加入到层级元素的比较。
子元素永远覆盖在父元素的上方。
可以用 z-index 控制， z-index大的事件先触发，
或者 背景的透明度为0
1.
background-color:#000;
2.
filter:alpha(opacity=0);
3.
opacity:0;
mousedown 和mouseup是优先于click事件先执行的。
事件触发
<a onclick="event.preventDefault();event.stopImmediatePropagation();event.stopPropagation();">close</a>
preventDefault : 阻止元素的默认行为， 如 submit按钮的提交行为
stopImmediatePropagation : 阻止这个元素上的其他的同类型监听的触发
stopPropagation : 阻止事件冒泡， 事件是从子往父逐级传递的
// if (e.stopPropagation) e.stopPropagation();
// if (e.preventDefault) e.preventDefault();
// e.cancelBubble = true;
// e.returnValue = false;
鼠标
click
mouseover 进入绑定元素的子元素时也会触发。
mouseout
mouseenter 进入绑定元素的子元素时不会触发。
mouseleave
hover
$(":visible").hover(function (){
$(this).css("border","1px solid pink")
},
function(){
$(this).css("border","0px");
})
$(":visible").mouseover(function (){
$(this).css("border","1px solid pink")
})
$(":visible").mouseout(function (){
$(this).css("border","0px");
})
$(":visible").mouseenter(function (){
$(this).css("border","1px solid pink")
})
$(":visible").mouseleave(function (){
$(this).css("border","0px");
})$(function () { //鼠标下的元素（去掉父元素）加边框
var old;
$(":visible").hover( //TODO 添加属性 而不是添加类。 把属性存下来，之后再复原。
function () {
if ($(this).find("[bordering='true']").length == 0 && $(this)[0].tagName != "HTML") {
old = $(this).css("border");
$(this).css("border", "1px solid pink").attr("bordering", "true");
}
},
function () {
$(this).css("border", old).attr("bordering", null);
})
});
一.获取鼠标位置
获取鼠标移动事件的event对象
通过对象可获取当前鼠标的x，y坐标
let x, y;
function mouseMove(e) {
e = e || window.event;
if (e.pageX || e.pageY) {
x = e.pageX;
y = e.pageY;
console.log(`鼠标横坐标：${x}px`);
console.log(`鼠标纵坐标：${y}px`);
}
}
document.onmousemove = mouseMove;
键盘
keydown 按键按下触发 若按键长按则连续触发 alt 和 ctrl 也会触发
keyup 按键抬起触发
keypress 按键按下触发 若按键长按则连续触发 alt 和 ctrl 不会触发
监听组合按键
document.onkeydown = function (e) {
var keyCode = e.keyCode || e.which || e.charCode;
var ctrlKey = e.ctrlKey || e.metaKey;
//if (ctrlKey && e.key=='s') { //不知道会不会有兼容问题
if (ctrlKey && keyCode == 83) {
alert('save');
}
e.preventDefault();
return false; //这一句会阻止浏览器获取按键。 就是浏览器的按键会失效， 但系统的不会失效
}$(document).keydown(function (event) {
if (event.keyCode == "13") {
alert("确认要提交么？");
}
});focus
blur
绑定事件
可以绑定多个事件，即使是同一个类型的事件。
$("input[name=event_1]").on({
mouseover: function () {
$("ul").css("display", "none");
},
mouseout: function () {
$("ul").css("display", "block");
}
});把on换成bind也行，不过不推荐
解绑
bind用unbind解绑
on 用off 解绑
$("div:first").off(); 解绑全部所有
$("div:first").off("mouseover"); 解绑所有这个类型的事件
$("div:first").off("mouseover",fun); 解绑这个事件，就是用这个函数绑定的事件，这个函数是一个变量。$("#myaccound").hover(
function(){ //execute when curse in
$("#menu_1").css("display","block");
},
function(){ //execute when curse out
$("#menu_1").css("display","none");
}
);$("body").toggle( //多次点击轮流call里面的函数
function () { },
function () { },
function () { }
);var disableSelection = $.fn.extend( {
disableSelection: ( function() {
var eventType = "onselectstart" in document.createElement( "div" ) ?
"selectstart" :
"mousedown";
return function() {
return this.on( eventType + ".ui-disableSelection", function( event ) {
event.preventDefault();
} );
};
} )(),
enableSelection: function() {
return this.off( ".ui-disableSelection" );
}
} );
评论区