9

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

 3 years ago
source link: https://blog.csdn.net/XVJINHUA954/article/details/111871006
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

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

禁止整个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>

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK