페이지 또는 텍스트가 선택되지 않도록하는 방법과 브라우저의 기본 동작을 방지하는 방법은 무엇입니까?

페이지 또는 텍스트가 선택되지 않도록하는 방법과 브라우저의 기본 동작을 방지하는 방법은 무엇입니까?

전체 본문의 내용이 선택 및 복사되는 것을 금지합니다.

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

페이지의 블록 또는 기사가 복사 대상으로 선택되지 않도록 금지합니다.

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

더 심각한 것은 HTML에서 텍스트 복사 및 선택 금지를 실현하기 위해 body 태그에 직접 다음 코드를 작성하는 것입니다.

<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()선택시 텍스트 상자가 비어 있음을 나타냅니다.

Native 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 태그의 원래 기본 이벤트를 차단해야합니다. . 기본 이벤트를 실행합니다.

기본 이벤트를 방지하는 두 가지 방법이 있습니다.

  • 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>

추천

출처blog.csdn.net/XVJINHUA954/article/details/111871006