侧边栏壁纸
  • 累计撰写 793 篇文章
  • 累计创建 1 个标签
  • 累计收到 1 条评论
标签搜索

目 录CONTENT

文章目录

事件

Dettan
2021-04-10 / 0 评论 / 0 点赞 / 137 阅读 / 1,338 字
温馨提示:
本文最后更新于 2022-07-23,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。
/ 前端 / JS / 事件
禁止选中文字
$('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" );
	}
} );

0

评论区