Nút chuột giữa sự kiện Javascript

Một trong những cách phổ biến nhất mà mọi người [và có thể cả mèo] tương tác với máy tính của họ là sử dụng một thiết bị trỏ được gọi là chuột

Thiết bị kỳ diệu này cho phép bạn hoàn thành những điều tuyệt vời bằng cách di chuyển nó xung quanh bằng tay và nhấp xung quanh bằng các ngón tay của bạn. Sử dụng chúng như một, ừm. người dùng là một chuyện. Là một nhà phát triển, cố gắng làm cho mã của bạn hoạt động bằng chuột là một việc khác. Đó là nơi hướng dẫn này xuất hiện

trở đi

Chúa ơi. Một cuốn sách JavaScript của Kirupa?

Để nâng cao kỹ năng JavaScript của bạn ra ngoài vũ trụ, mọi thứ bạn cần để trở thành chuyên gia về JS đều có sẵn ở cả ấn bản bìa mềm và kỹ thuật số

Gặp gỡ các sự kiện chuột

Trong JavaScript, cách xử lý chuột chính của chúng ta là thông qua các sự kiện. Có rất nhiều sự kiện liên quan đến chuột, nhưng chúng ta sẽ không xem xét tất cả chúng ở đây. Thay vào đó, chúng tôi sẽ chỉ tập trung vào những thứ thú vị và phổ biến như sau

• nhấp chuột
• dblclick
• Di chuột lên trên
• di chuột ra ngoài
• nhập chuột
• con chuột
• Di chuột xuống
• di chuột
• di chuột
• danh mục
• con lăn chuột và DOMMouseScroll

Tên của những sự kiện này sẽ cung cấp cho bạn ý tưởng hay về những gì chúng làm, nhưng chúng ta sẽ không coi thường điều gì và xem xét từng sự kiện này ở một mức độ chi tiết hơn trong các phần sau. Tôi nên cảnh báo bạn rằng một số sự kiện chỉ là nhàm chán khủng khiếp để tìm hiểu về

Nhấp một lần và nhấp hai lần

Hãy bắt đầu với sự kiện chuột phổ biến nhất mà bạn sẽ sử dụng, sự kiện nhấp chuột. Sự kiện này được kích hoạt khi về cơ bản bạn nhấp vào một phần tử. Để diễn đạt khác theo cách không liên quan đến việc đề cập đến thứ bạn đang mô tả như một phần trong mô tả của mình, sự kiện nhấp chuột được kích hoạt khi bạn sử dụng chuột để nhấn xuống một phần tử rồi thả nhấn trong khi vẫn giữ nguyên như vậy

Đây là một hình dung hoàn toàn không cần thiết về những gì tôi đang nói về

Bạn đã thấy mã để làm việc với sự kiện nhấp chuột một vài lần, nhưng bạn thực sự không bao giờ có thể hiểu đủ về nó. Đây là một ví dụ khác

var button = document.querySelector["#myButton"];
button.addEventListener["click", doSomething, false];

function doSomething[e] {
    console.log["Mouse clicked on something!"];
}

Cách bạn lắng nghe sự kiện nhấp chuột cũng giống như hầu hết mọi sự kiện khác mà bạn sẽ gặp phải, vì vậy tôi sẽ không làm bạn khó chịu với chi tiết đó một cách không cần thiết. Khi sự kiện nhấp chuột bị nghe lỏm, trình xử lý sự kiện sẽ bắt đầu hành động. Thay vào đó, tôi sẽ cung cấp cho bạn thông tin chi tiết về sự kiện dblclick hơi liên quan

Sự kiện dblclick được kích hoạt khi về cơ bản, bạn nhanh chóng lặp lại hành động nhấp chuột nhiều lần và mã để sử dụng sự kiện này trông như sau

var button = document.querySelector["#myButton"];
button.addEventListener["dblclick", doSomething, false];

function doSomething[e] {
    console.log["Mouse clicked on something...twice!"];
}

Lượng thời gian giữa mỗi lần nhấp dẫn đến sự kiện dblclick dựa trên hệ điều hành mà bạn đang chạy mã trong đó. Nó không phải là trình duyệt cụ thể cũng không phải là thứ bạn có thể xác định [hoặc đọc] bằng JavaScript

Đừng lạm dụng nó

Nếu bạn tình cờ nghe cả sự kiện click và dblclick trên một phần tử, trình xử lý sự kiện của bạn sẽ được gọi ba lần khi bạn nhấp đúp. Bạn sẽ nhận được hai sự kiện nhấp chuột tương ứng với mỗi lần bạn nhấp vào. Sau lần nhấp thứ hai, bạn cũng sẽ nhận được sự kiện dblclick

Di chuột qua và di chuột ra ngoài

Các tình huống di chuột qua và di chuột ra cổ điển được xử lý bằng các sự kiện di chuột qua và di chuột ra có tiêu đề thích hợp tương ứng

Đây là một đoạn trích của hai sự kiện này trong hành động

var button = document.querySelector["#myButton"];
button.addEventListener["mouseover", hovered, false];
button.addEventListener["mouseout", hoveredOut, false];

function hovered[e] {
    console.log["Hovered!"];
}

function hoveredOut[e] {
    console.log["Hovered Away!"];
}

Đó là tất cả những gì có trong hai sự kiện này. Họ khá nhàm chán về tổng thể. mà, như bây giờ bạn có thể đã phát hiện ra, thực sự là một điều tốt khi nói đến các khái niệm lập trình

Còn mouseenter và mouseleave thì sao?

Chúng ta vừa xem xét hai sự kiện [di chuột qua và di chuột ra ngoài] đều liên quan đến việc di chuột qua một thứ gì đó và di chuột ra xa một thứ gì đó. Hóa ra, bạn có thêm hai sự kiện gần như giống hệt nhau. Đây là các sự kiện mouseenter và mouseleave của bạn. Có một chi tiết quan trọng cần biết về những sự kiện này khiến chúng trở nên độc đáo. Các sự kiện mouseenter và mouseleave không bong bóng

Chi tiết này chỉ quan trọng nếu phần tử bạn muốn di chuột qua hoặc ra khỏi có phần tử con. Tất cả bốn sự kiện này hoạt động giống hệt nhau khi không có phần tử con nào đang chơi. Nếu có các phần tử con đang chơi

• mouseover và mouseout sẽ bị kích hoạt mỗi khi bạn di chuyển chuột qua và xung quanh phần tử con. Điều này có nghĩa là bạn có thể thấy nhiều sự kiện không cần thiết xảy ra mặc dù có vẻ như bạn đang di chuyển chuột trong một vùng duy nhất
• mouseenter và mouseleave sẽ chỉ được kích hoạt một lần. Chuột của bạn di chuyển qua bao nhiêu phần tử con không quan trọng

Đối với 90% những gì bạn sẽ làm, di chuột qua và di chuột ra ngoài sẽ đủ tốt. Đối với những thời điểm khác, thường liên quan đến các tình huống giao diện người dùng phức tạp hơn một chút, bạn sẽ rất vui khi có sẵn các sự kiện mouseenter và mouseleave không sủi bọt

Các sự kiện Di chuột xuống và Di chuyển lên giống như nhấp chuột

Hai sự kiện gần như là thành phần phụ của sự kiện nhấp chuột là sự kiện mousedown và mouseup. Từ sơ đồ sau, bạn sẽ thấy tại sao

Khi bạn nhấn chuột xuống, sự kiện mousedown được kích hoạt. Khi bạn nhả phím, sự kiện mouseup được kích hoạt. Nếu phần tử bạn nhấn và thả ra là cùng một phần tử, thì sự kiện nhấp chuột cũng sẽ kích hoạt

Bạn có thể thấy tất cả những điều này từ đoạn mã sau

var button = document.querySelector["#myButton"];
button.addEventListener["mousedown", mousePressed, false];
button.addEventListener["mouseup", mouseReleased, false];
button.addEventListener["click", mouseClicked, false];

function mousePressed[e] {
    console.log["Mouse is down!"];
}

function mouseReleased[e] {
    console.log["Mouse is up!"];
}

function mouseClicked[e] {
    console.log["Mouse is clicked!"];
}

Bạn có thể tự hỏi, "Tại sao phải bận tâm đến hai sự kiện này?" . Nếu bạn đang trải qua những đêm mất ngủ để tự hỏi điều này, thì câu trả lời là. Đúng. Một câu trả lời hữu ích hơn [và hợp lý] là các sự kiện mousedown và mouseup chỉ đơn giản là cung cấp cho bạn nhiều quyền kiểm soát hơn trong trường hợp bạn cần. Một số tương tác [chẳng hạn như kéo] chỉ cần bạn hành động khi sự kiện di chuột xuống đã xảy ra nhưng sự kiện di chuột lên chưa xảy ra

Sự Kiện Được Nghe Lại. Và một lần nữa. Và một lần nữa

Một trong những sự kiện trò chuyện nhiều nhất mà bạn từng gặp là sự kiện mousemove rất thân thiện. Sự kiện này kích hoạt rất nhiều lần khi chuột của bạn di chuyển qua phần tử mà bạn đang nghe sự kiện mousemove trên

Dưới đây là một ví dụ về sự kiện mousemove trong mã

var button = document.querySelector["#myButton"];
button.addEventListener["mousemove", mouseIsMoving, false];

function mouseIsMoving[e] {
    console.log["Mouse is on the run!"];
}

Trình duyệt của bạn kiểm soát tốc độ kích hoạt sự kiện mousemove và sự kiện này sẽ được kích hoạt nếu chuột của bạn di chuyển dù chỉ một pixel. Sự kiện này rất phù hợp với nhiều tình huống tương tác, chẳng hạn như vị trí hiện tại của con chuột của bạn có liên quan để theo dõi

Menu ngữ cảnh

Sự kiện cuối cùng mà chúng ta sắp xem xét được gọi một cách trìu mến là contextmenu. Như bạn có thể biết rất rõ, khi bạn thường nhấp chuột phải vào các ứng dụng khác nhau, bạn sẽ thấy một menu

Menu này được gọi là menu ngữ cảnh. Sự kiện contextmenu được kích hoạt ngay trước khi menu này xuất hiện

Bây giờ, bạn có thể tự hỏi tại sao mọi người lại muốn một sự kiện cho tình huống này. Thành thật mà nói với bạn [trái ngược với tất cả những lần khác mà tôi đã nói dối], chỉ có một lý do chính để lắng nghe sự kiện này. Lý do đó liên quan đến việc ngăn menu này xuất hiện khi bạn nhấp chuột phải hoặc sử dụng phím tắt hoặc nút trên bàn phím menu ngữ cảnh

Dưới đây là một ví dụ về cách bạn có thể ngăn hành vi mặc định khi menu ngữ cảnh xuất hiện

document.addEventListener["contextmenu", hideMenu, false];

function hideMenu[e] {
    e.preventDefault[];
}

Phương thức preventDefault trên một Sự kiện dừng bất kỳ hành vi mặc định nào thực sự xảy ra. Bởi vì sự kiện contextmenu được kích hoạt trước khi menu xuất hiện, nên gọi preventDefault trên nó để đảm bảo menu ngữ cảnh không bao giờ xuất hiện. Hành vi mặc định đã bị ngăn không cho chạy

Với tất cả những gì đã nói, tôi có thể nghĩ ra hàng tỷ cách khác để bạn có thể ngăn menu ngữ cảnh xuất hiện mà không cần sử dụng một sự kiện để giải quyết tất cả những điều này, nhưng đó là cách mọi thứ diễn ra. bây giờ

Thuộc tính MouseEvent

Hãy cụ thể hơn một chút. Tất cả các sự kiện chuột mà chúng tôi đã thấy cho đến nay đều dựa trên MouseEvent. Thông thường, đây là loại sự thật mà bạn giữ kín trong đêm đố vui và bỏ qua. Tuy nhiên, lần này, chi tiết này rất quan trọng vì MouseEvent mang theo một số thuộc tính giúp làm việc với chuột dễ dàng hơn. Hãy nhìn vào một số trong số họ

Vị trí chuột toàn cầu

Thuộc tính screenX và screenY trả về khoảng cách con trỏ chuột của bạn từ vị trí trên cùng bên trái của màn hình chính của bạn

Đây là một ví dụ rất đơn giản về các thuộc tính screenX và screenY tại nơi làm việc

document.addEventListener["mousemove", mouseMoving, false];

function mouseMoving[e] {
    console.log[e.screenX + " " + e.screenY];
}

Không quan trọng bạn có thể có sự điên cuồng nào khác về lề/phần đệm/bù/bố cục trên trang của mình. Các giá trị được trả về sẽ luôn là khoảng cách giữa vị trí hiện tại của chuột và vị trí góc trên cùng bên trái của màn hình chính của bạn

Vị trí chuột bên trong trình duyệt

Các thuộc tính clientX và clientY trả về vị trí x và y của chuột so với góc trên cùng bên trái của trình duyệt của bạn [về mặt kỹ thuật, chế độ xem của trình duyệt]

Mã cho điều này không có gì thú vị

var button = document.querySelector["#myButton"];
button.addEventListener["mousemove", mouseMoving, false];

function mouseMoving[e] {
    console.log[e.clientX + " " + e.clientY];
}

Bạn chỉ cần gọi các thuộc tính clientX và clientY của đối số sự kiện đã được chuyển vào trình xử lý sự kiện của chúng tôi để nhận các giá trị

Phát hiện nút nào đã được nhấp

Chuột của bạn thường có nhiều nút hay cách giả lập nhiều nút. Cấu hình nút phổ biến nhất bao gồm nút trái, nút phải và nút giữa [thường là một lần nhấp vào con lăn chuột của bạn]. Để tìm ra nút chuột nào đã được nhấn, bạn có thuộc tính nút. Thuộc tính này trả về 0 nếu nhấn nút chuột trái, 1 nếu nhấn nút giữa và 2 nếu nhấn nút chuột phải

Mã sử ​​dụng thuộc tính nút để kiểm tra xem nút nào đã được nhấn trông chính xác như bạn mong đợi

Ngoài thuộc tính nút, bạn cũng có các nút và thuộc tính nào sẽ làm những việc tương tự để giúp bạn tìm ra nút nào đã được nhấn. Tôi sẽ không nói quá nhiều về hai tính chất đó mà chỉ biết rằng chúng tồn tại

Xử lý con lăn chuột

Con lăn chuột đặc biệt so với mọi thứ khác mà chúng tôi đã thấy cho đến nay. Sự khác biệt rõ ràng là chúng ta đang xử lý một bánh xe thay vì một nút. Chi tiết ít rõ ràng hơn, nhưng có lẽ phù hợp hơn, là bạn có hai sự kiện cần giải quyết. Bạn có sự kiện con lăn chuột được sử dụng bởi Internet Explorer và Chrome và sự kiện DOMMouseScroll được sử dụng bởi Firefox

Cách bạn lắng nghe những sự kiện liên quan đến con lăn chuột này vẫn bình thường

document.addEventListener["mousewheel", mouseWheeling, false];
document.addEventListener["DOMMouseScroll", mouseWheeling, false];

Đó là những gì xảy ra sau đó khi mọi thứ trở nên thú vị. Các sự kiện con lăn chuột và DOMMouseScroll sẽ kích hoạt ngay khi bạn cuộn con lăn chuột theo bất kỳ hướng nào. Đối với tất cả các mục đích thực tế, hướng bạn cuộn con lăn chuột là rất quan trọng. Để có được thông tin đó, chúng ta sẽ cần truy cập vào trình xử lý sự kiện để tìm đối số sự kiện

Đối số sự kiện cho sự kiện con lăn chuột chứa thuộc tính được gọi là wheelDelta. Đối với sự kiện DOMMouseScroll, bạn có thuộc tính chi tiết trên đối số sự kiện. Cả hai thuộc tính này giống nhau ở chỗ giá trị của chúng thay đổi từ dương hoặc âm tùy thuộc vào hướng bạn cuộn con lăn chuột. Điều cần lưu ý là chúng không nhất quán trong dấu hiệu mà chúng đi cùng. Thuộc tính wheelDelta được liên kết với sự kiện con lăn chuột là dương khi bạn cuộn lên trên con lăn chuột. Nó là số âm khi bạn cuộn xuống. Điều ngược lại hoàn toàn đúng với thuộc tính chi tiết của DOMMouseScroll. Thuộc tính này âm khi bạn cuộn lên và dương khi bạn cuộn xuống

Xử lý bánh xe nàyDelta và sự không nhất quán chi tiết khá đơn giản. như bạn có thể thấy trong đoạn mã sau

var button = document.querySelector["#myButton"];
button.addEventListener["dblclick", doSomething, false];

function doSomething[e] {
    console.log["Mouse clicked on something...twice!"];
}

Biến scrollDirection lưu trữ giá trị được chứa bởi thuộc tính wheelData hoặc thuộc tính chi tiết. Tùy thuộc vào việc giá trị này là dương hay âm, sau đó bạn có thể đặt trường hợp đặc biệt cho hành vi

Phần kết luận

Nói chung, đúng là nếu bạn biết cách chỉ làm việc với một sự kiện, thì bạn gần như biết cách làm việc với tất cả các sự kiện khác. Điều duy nhất bạn cần biết là sự kiện nào tương ứng với những gì bạn đang cố gắng thực hiện. Các sự kiện chuột là phần giới thiệu tốt để làm việc với các sự kiện vì chúng rất dễ sử dụng. Chúng không quá cầu kỳ và những điều bạn tìm hiểu về chúng sẽ được sử dụng trong hầu hết các ứng dụng mà bạn xây dựng

Làm cách nào để phát hiện sự kiện nhấp chuột trong JavaScript?

Làm cách nào tôi có thể kích hoạt sự kiện nhấp chuột trong JavaScript?

Auxclick trong JavaScript là gì?

Nút sự kiện trong JavaScript là gì?