事件

/ 前端 / JS / 事件

禁止选中文字

$('body').css("user-select",'none').css("-webkit-user-drag",'none')

$('body').css("user-select",'auto').css("-webkit-user-drag",'auto')

所有事件

事件分为捕获阶段和冒泡阶段， 点击事件总是最大的元素先捕获，然后向子元素分配，最后到达真正点击的元素。然后就是冒泡阶段，从小到大依次触发。  

addEventListener

触发顺序

如果设置了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 

background-color:#000;

filter:alpha(opacity=0);

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);
        })
});

            <div style="color: inherit; fill: inherit;">
                <div style="display: flex;">

事件

评论区