programming javascript

Nhấp vào javascript

Hiện tại việc này sao chép nội dung từ các trang Web khác về Trang web của mình mà không trích dẫn nguồn là trường hợp rất phổ biến tại Việt Nam. Trong bài viết này vncoder. vn sẽ hướng dẫn chi tiết cho các bạn về cách sao chép và nhấp chuột phải từ người dùng kết hợp sử dụng CSS và Javascript

1. Chặn sao chép

Mình sẽ kết hợp cả 2 biện pháp là sử dụng CSS với JavaScript. Bạn chỉ cần đưa đoạn mã sau vào trước thẻ đóng của mẫu HTML trang web của bạn là thành công


body{
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}

function killCopy[e]{
return false
}
function reEnable[]{
return true
}
document.onselectstart=new Function [“return false”]
if [window.sidebar]{
document.onmousedown=killCopy
document. title=reEnable
}

Ở trên đoạn CSS3 anti copy; . Do la CSS3, if any browser is not support full. Thì nó không hoạt động, nghĩa là đối tượng vẫn sao chép được. Do vậy ta mới cần thêm JavaScript – cái này thì hoạt động tốt trên hầu hết trình duyệt

Tuy nhiên JavaScript lại có điểm yếu là các đối tượng có thể chủ động tắt JavaScript của trình duyệt để sao chép… Và đó là lý do ta nên kết hợp cả hai. Vì CSS, đối tượng lại không thể tự động tắt. Phối hợp cả 2 để chúng bù đắp những điểm yếu của nhau

2. Chặn nhấp chuột phải

Thêm tính năng chống thao tác chuột phải [hạn chế trạng thái sao chép ảnh và văn bản], thì đây là mã đoạn… Vị trí thì vẫn thế, bạn cứ để nó trước thẻ đóng


    window.onload = function[] {
        document.addEventListener["contextmenu", function[e] {
            e.preventDefault[];
        }, false];
        document.addEventListener["keydown", function[e] {
            //document.onkeydown = function[e] {
            // "I" key
            if [e.ctrlKey && e.shiftKey && e.keyCode == 73] {
                disabledEvent[e];
            }
            // "J" key
            if [e.ctrlKey && e.shiftKey && e.keyCode == 74] {
                disabledEvent[e];
            }
            // "S" key + macOS
            if [e.keyCode == 83 && [navigator.platform.match["Mac"] ? e.metaKey : e.ctrlKey]] {
                disabledEvent[e];
            }
            // "U" key
            if [e.ctrlKey && e.keyCode == 85] {
                disabledEvent[e];
            }
            // "F12" key
            if [event.keyCode == 123] {
                disabledEvent[e];
            }
        }, false];
 
        function disabledEvent[e] {
            if [e.stopPropagation] {
                e.stopPropagation[];
            } else if [window.event] {
                window.event.cancelBubble = true;
            }
            e.preventDefault[];
            return false;
        }
    };

Nguồn tham khảo. VNCoder. Hướng ngăn sao chép và nhấp chuột phải từ người dùng sử dụng CSS kết hợp Javascript

Bạn có thể viết mã JavaScript để thực hiện một tác vụ nào đó có một sự kiện xảy ra trên DOM [các phần tử HTML], ví dụ như khi người dùng nhấn vào một phần tử cụ thể, khi di chuyển chuột trên phần tử, khi

Trường hợp đầu tiên này, các sự kiện trên phần tử coi như thuộc tính của phần tử, thuộc tính sự kiện sẽ được gán bằng tên hàm được thi hành hoặc mã JS

Ví dụ, trên các phần tử HTML bất kỳ đều có thuộc tính

Click Me

4 [sự kiện nhấp vào phần tử], như vậy tạo ra một phần tử

Click Me

5 có thuộc tính

Click Me

4 được gán bằng một hàm JS có tên

Click Me

7, khi nhấp vào phần tử p

some text

HTML event table or used

Các sự kiện thuộc tính tên này được sử dụng theo cách trên cho bất kỳ phần tử HTML nào

Sự kiệnMô tả

Click Me

4xảy ra khi nhấn chuột vào phần tử

Bấm - Xem thời gian hiện tại?

0xảy ra khi phần tử được tải xuống

Bấm - Xem thời gian hiện tại?

1xảy ra khi không tải trang [phần thân phần tử]

Bấm - Xem thời gian hiện tại?

2xảy ra khi thay đổi nội dung phần tử trong

Bấm - Xem thời gian hiện tại?

3 như chọn, khi người dùng nhấn radio, áp dụng

Ví dụ bắt sự kiện trên phần tử HTML

Sự kiện có thể được bắt bằng cách khai báo ngay từ thuộc tính trong HTML, ví dụ sau đó hiện cửa sổ bật lên khi người dùng nhấn chuột vào phần tử

Click Me

Nhấp vào tôi

Sự kiện đã được bắt bằng đoạn mã.

window.onload = function[] {
   //mã 
}

Bắt đầu sự kiện trên phần tử DOM - HTMLElement

Cách bắt sự kiện trên phần tử HTML là bạn bắt sự kiện bằng mã JavaScript, thông qua đối tượng HTMLElement được tìm thấy trên DOM. Các phần tử HTML của nó đều được biểu diễn bởi lớp HTMLElement, khi đã là một phần tử HTMLElement thì có thể gán các thuộc tính sự kiện ở trên bằng các phương thức

Ví dụ

Bấm - Xem thời gian hiện tại?

Bấm - Xem thời gian hiện tại?

Sự kiện đã được bắt bằng đoạn mã.

window.onload = function[] {
   //mã 
}

1 hoặc bằng

window.onload = function[] {
   //mã 
}

đang tải, đang tải

Bấm - Xem thời gian hiện tại?

0 và

window.onload = function[] {
   //mã 
}

4 xảy ra khi người dùng mở trang và rời trang

Tương tự

window.onload = function[] {
   //mã 
}

5 có thể được sử dụng để bắt dự án khi trang được tải xuống

window.onload = function[] {
   //mã 
}

trao đổi

Bấm - Xem thời gian hiện tại?

2 sử dụng biến phổ biến trong hộp nhập dữ liệu văn bản. Sự cố xảy ra khi textbox nội dung thay đổi và mất tiêu điểm

Delay the event on DOM with addEventListener

Phương thức

window.onload = function[] {
   //mã 
}

7 sẽ gắn thêm hàm [Listener] vào một phần tử để lắng nghe sự kiện của phần tử mà không loại bỏ các hàm đã gắn trước đó. Điều này giúp cho một sự kiện xảy ra có thể gọi nhiều hàm Listener gắn với sự kiện đó

element.addEventListener[event, listener, useCapture];

Các tham số là

biến cố. tên sự kiện ví dụ

window.onload = function[] {
   //mã 
}

window.onload = function[] {
   //mã 
}

thính giả. tham số thứ 2 là hàm do bạn định nghĩa, muốn thực hiện khi sự kiện xảy ra. Hàm này có một tham số là đối tượng EventTarget đã nhận được, khai báo hàm này có dạng.
```
[event] { ... }
```
sử dụngCapture. tham số thứ 3 là giá trị
4,
5 đây là một tùy chọn sẽ giải thích sau

Chú ý không có tiền tố

6 ví dụ sử dụng

window.onload = function[] {
   //mã 
}

8 chứ không phải

Click Me

4 như phần trên

// Có phần tử element
element.addEventListener["click", myFunction];      // Gọi myFunction khi có sự kiện click
element.addEventListener["mouseover", myFunction];  // Gọi myFunction khi có sự kiện mouseover

function myFunction[event] {
  alert["Hello World!"];
}

loại bỏEventListener

Hàm dùng để loại bỏ chức năng [trình nghe] đã gắn vào sự kiện trên phần tử

element.removeEventListener[name_event, listener];

Ví dụ sau khi gắn một hàm [listener] vào phần tử để lắng nghe sự kiện click, khi sự kiện đó xảy ra thì loại bỏ listener đó [không lắng nghe nữa - chỉ click được 1 lần]

Start

Bắt đầu

Type lan truyền sự kiện

Ở đây giải thích tham số thứ 3 trong hàm addEventListener, tham số useCapture

Có hai kiểu truyền sự kiện gọi với tên.

9 và

element.addEventListener[event, listener, useCapture];

Capture [tham số useCapture = true] - event going from on bottom of DOM
sủi bọt [tham số useCapture = false mặc định] - sự kiện truyền từ bên dưới lên trên trong cây DOM

Để giải thích giả sử có phần tử

element.addEventListener[event, listener, useCapture];

1 bên trong nó có chứa phần tử

Click Me

5 [cả hai phần tử này đều có người nghe lắng nghe sự kiện nhấp chuột]. Khi nhấn chuột vào

Click Me

5 thì xảy ra sự kiện

element.addEventListener[event, listener, useCapture];

4, do đó phần tử

Click Me

5 hay phần tử

element.addEventListener[event, listener, useCapture];

1 sẽ bắt được sự kiện trước?

This is div section

Đây là phần tử p, nằm trong div

Nếu là

element.addEventListener[event, listener, useCapture];

0 nghĩa là tham số thứ 3

element.addEventListener[event, listener, useCapture];

8 là

4 thì phần tử

element.addEventListener[event, listener, useCapture];

1 nhận được sự kiện trước, sau đó mới đến

Click Me

5 [sự kiện lan truyền từ phần tử bao gồm các phần tử]

If is

9 mean is tham số thứ 3

element.addEventListener[event, listener, useCapture];

8 is

5 thì phần tử

Click Me

5 nhận được sự kiện trước, sau đó mới đến

element.addEventListener[event, listener, useCapture];

Bạn có thể dừng việc truyền sự kiện khi một phần tử nào đó đã nhận được, băng cách sử dụng

[event] { ... }

7 [xem ở bên dưới]

Click Me

Listener when started the event

Nói kỹ hơn về các chức năng để gắn vào sự kiện mà ta gọi là Listener. Các hàm này có giao diện phát triển khai từ giao diện

[event] { ... }

Có nghĩa là một hàm Javascript có 1 tham số, tham số đó chứa thông tin sự kiện gửi đến, mọi trường hợp bạn có định nghĩa ra các hàm Listener với cấu trúc như sau

Click Me

Khi Listener của bạn bắt gặp một sự kiện nào đó, nó luôn nhận được tham số bao gồm thông tin sự kiện, ở ví dụ được lưu trong tham số

[event] { ... }

9, tham số này là đối tượng kiểu Sự kiện

Sự kiện có nhiều phương thức, có một số mà bạn tham khao luôn ở đây như

// Có phần tử element
element.addEventListener["click", myFunction];      // Gọi myFunction khi có sự kiện click
element.addEventListener["mouseover", myFunction];  // Gọi myFunction khi có sự kiện mouseover

function myFunction[event] {
  alert["Hello World!"];
}

0Ngăn chặn ứng dụng thông thường xảy ra trên phần tử. Ví dụ: bạn nhấn vào liên kết, gọi phương thức thực tế này sẽ ngăn chặn quá trình duyệt chuyển đến trang chỉ ra bởi liên kết đó.

Click Me

// Có phần tử element
element.addEventListener["click", myFunction];      // Gọi myFunction khi có sự kiện click
element.addEventListener["mouseover", myFunction];  // Gọi myFunction khi có sự kiện mouseover

function myFunction[event] {
  alert["Hello World!"];
}

1Dừng lan truyền sự kiện, ví dụ nếu một sự kiện có nhiều sự kiện đang lắng nghe, bạn muốn sau khi Người nghe của bạn bắt được thì những Người nghe khác không còn nhận được nữa thì gọi phương thức này

Tạo và phát sự kiện Sự kiện

Ngoài cách sử dụng các điều kiện có sẵn trong các API mặc định trong DOM, bạn cũng có thể tạo ra các loại sự kiện riêng, tên sự kiện do bạn đặt và một đối tượng có thể phát ra sự kiện đó để người nghe đăng ký

Ở ví dụ này, ta tạo ra một sự kiện có tên

// Có phần tử element
element.addEventListener["click", myFunction];      // Gọi myFunction khi có sự kiện click
element.addEventListener["mouseover", myFunction];  // Gọi myFunction khi có sự kiện mouseover

function myFunction[event] {
  alert["Hello World!"];
}

2, sự kiện đó chứa dữ liệu là dòng chữ

// Có phần tử element
element.addEventListener["click", myFunction];      // Gọi myFunction khi có sự kiện click
element.addEventListener["mouseover", myFunction];  // Gọi myFunction khi có sự kiện mouseover

function myFunction[event] {
  alert["Hello World!"];
}

3, sau đó đối tượng DOM

// Có phần tử element
element.addEventListener["click", myFunction];      // Gọi myFunction khi có sự kiện click
element.addEventListener["mouseover", myFunction];  // Gọi myFunction khi có sự kiện mouseover

function myFunction[event] {
  alert["Hello World!"];
}

4 phát đi sự kiện đó

Mặt khác ta cũng gắn vào

// Có phần tử element
element.addEventListener["click", myFunction];      // Gọi myFunction khi có sự kiện click
element.addEventListener["mouseover", myFunction];  // Gọi myFunction khi có sự kiện mouseover

function myFunction[event] {
  alert["Hello World!"];
}

4 một Listener đang lắng nghe sự kiện có tên

// Có phần tử element
element.addEventListener["click", myFunction];      // Gọi myFunction khi có sự kiện click
element.addEventListener["mouseover", myFunction];  // Gọi myFunction khi có sự kiện mouseover

function myFunction[event] {
  alert["Hello World!"];
}

2, để mỗi khi sự kiện này xảy ra thì Listener này được gọi