[Web Dev] Sức mạnh tiềm ẩn của pointer-events mà có thể bạn chưa biết

Chào các bạn, nếu học CSS cơ bản thì chắc chẳng ai còn xa lạ gì với thuộc tính `pointer-events` nữa. Tuy nhiên ngoài chức năng ngăn cản một hành động nào đó tác động lên phần tử thì nó còn gì hay ho hơn không ? Hãy cùng mình tìm hiểu qua bài viết này nhé  ## 1. Vô hiệu hóa button Thông thường để vô hiệu hóa một button ta có thể dễ dàng thêm thuộc tính `disabled='disabled'`, vậy còn cách nào nữa không, câu trả lời là có thông qua ví dụ dưới đây (hãy click vào button để kiểm tra) {@embed: https://codepen.io/hoanghung96cs/pen/MMXPxm } ## 2. Thay đổi style của `parent-element` khi hover Rất ảo diệu, nhờ có `pointer-events` ta có thể dễ dàng thực hiện được kịch bản 'hover vào con thay đổi style của cha' thông qua ví dụ sau {@embed: https://codepen.io/hoanghung96cs/pen/rEKQWd } ## 3. Thay đổi style của `previous-element` khi hover Tương tự như phần 2 ta cũng có thể thay đổi được style của phần tử trước nó khi sử dụng `pointer-events` {@embed: https://codepen.io/hoanghung96cs/pen/VJdVbJ } ## 4. "Mũi tên" selectbox Thông thường khi muốn thay đổi style 'mũi tên xổ xuống' của thẻ `select` ta sẽ dùng một `div` bọc ngoài và style mũi tên cho nó, tuy nhiên một bất cập gặp phải đó là **khi người dùng click vào trúng mũi tên** đó thì thẻ `select` sẽ không xổ xuống. Đừng lo ! Hãy để `pointer-events` xử lý vấn đề này {@embed: https://codepen.io/hoanghung96cs/pen/MMyEYz } ## 5. Selecting text Bạn hãy xem ví dụ sau để xem tác dụng của `pointer-events` nhé {@embed: https://codepen.io/hoanghung96cs/pen/qzKQjv } ### Kết luận Trên đây là một số tips hay về `pointer-events` mà mình đã sưu tập được cũng như rút ra trong quá trình làm việc thực tế. Nếu bạn có tips nào hay đừng ngần ngại chia sẻ cho cộng đồng FE nhé ! Nếu thấy bài viết hay hãy upvote cho mình nhé, nếu thích mình hãy nhấn follow để nhận thêm nhiều bài viết hay. Xin cảm ơn !

Via Viblo