如何禁止页面或文本被选中以及如何阻止浏览器的默认行为?

禁止整个body中的内容被选中复制：

<body onselectstart="return false">
    <p>禁止整个body中的内容被选中复制</p>
</body>

禁止页面中某一块或某一篇文章被选中复制：

<body>
    <div onselectstart="return false">
        这段内容不可选，禁止文字被选中
        <p>禁止页面中某一块或某一篇文章被选中复制</p>
    </div>
</body>

再狠点,直接在body标签中写入如下代码,实现HTML中禁止文字的复制和选中.

<body oncontextmenu='return false' ondragstart='return false' onselectstart='return false'
    onselect='document.selection.empty()' oncopy='document.selection.empty()' onbeforecopy='return false'
    onmouseup='document.selection.empty()'>
    <div>
        HTML中禁止文字的复制和选中
        <p>HTML中禁止文字的复制和选中</p>
    </div>
</body>

`<body>`中的各个事件

oncontextmenu='return false'取消鼠标右键
ondragstart='return false'禁止鼠标在网页上拖动
onselectstart='return false'禁止选中网页上的内容
onselect='document.selection.empty()'
- onselect事件会在文本框中的文本被选中时发生
- οnselect=“SomeJavaScriptCode”必需规定该事件发生时执行的 JavaScript
- document.selection.empty()表示文本框被选中时为空
oncopy='return false'防复制用户在网页上选中的内容
onbeforecopy='return false'onbeforecopy():默认动作的事件源对象上被取消
onmouseup='document.selection.empty()'
- onmouseup事件会在鼠标按键被松开时发生
- οnmοuseup=“SomeJavaScriptCode”同onselect一样，必需规定该事件发生时执行的 JavaScript
- document.selection.empty()表示文本框被选中时为空

原生JS实现一张图片替换光标功能

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实现一张图片替换光标功能</title>
    <style>
        .div {
     
     
            width: 600px;
            height: 600px;
            border: 1px solid red;

        }
    </style>
</head>

<body>
    <div class="div"></div>
    <script>
        window.onload = function () {
     
     
            var d = document.querySelector(".div")
            d.onmousemove = function () {
     
     
                this.style.cursor = 'url(1.ico),auto';
            }
        }
    </script>
</body>

</html>

浏览器默认行为

什么是默认行为?

默认行为，就是不用我们注册，其本身就存在的事情
- 比如我们点击鼠标右键的时候，会自动弹出一个菜单
- 比如我们点击 a 标签的时候，我们不需要注册点击事件，他自己就会跳转页面
像这些不需要我们注册就能实现的事情，我们叫做默认事件

阻止默认行为

有的时候，我们不希望浏览器执行默认事件
- 比如我给 a 标签绑定了一个点击事件，我点击你的时候希望你能告诉我你的地址是什么，而不是直接跳转链接，那么我们就要把 a 标签原先的默认事件阻止，不让他执行默认事件

我们有两个方法来阻止默认事件

e.preventDefault(): 非 IE 使用
e.returnValue = false ：IE 使用

我们阻止默认事件的时候也要写一个兼容的写法

    var oA = document.querySelector('a')
    a.addEventListener('click', function (e) {
    
    
        e = e || window.event
        console.log(this.href)
        //下面这个是兼容写法
        e.preventDefault ? e.preventDefault() : e.returnValue = false
    })

实例

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        window.onload = function () {
     
     
            //抓取元素
            var a = document.getElementById("a");
            a.onclick = function (e) {
     
     
                //获得事件对象
                var e = e || window.event;
                //判断浏览器
                if (document.all) {
     
     
                    //阻止IE浏览器的默认行为
                    //阻止a标签跳转和from表单的提交
                    e.returnValue = false;
                } else {
     
     
                    //阻止非IE浏览器的默认行为
                    //阻止a标签跳转和from表单的提交
                    e.preventDefault()
                }
            }

        }
    </script>
</head>

<body>
    <a id="a" href="http://www.baidu.com">跳转百度</a>
    <a href="javascript:;">阻止a标签跳转</a>
    <a href="javascript:viod(0);">阻止a标签跳转</a>
</body>

</html>

如何禁止页面或文本被选中以及如何阻止浏览器的默认行为?

如何禁止页面或文本被选中以及如何阻止浏览器的默认行为?

禁止整个body中的内容被选中复制：

禁止页面中某一块或某一篇文章被选中复制：

再狠点,直接在body标签中写入如下代码,实现HTML中禁止文字的复制和选中.

<body>中的各个事件

原生JS实现一张图片替换光标功能

浏览器默认行为

什么是默认行为?

阻止默认行为

我们有两个方法来阻止默认事件

我们阻止默认事件的时候也要写一个兼容的写法

实例

猜你喜欢

`<body>`中的各个事件