01/10/2018, 14:48

Thắc mắc về js resize window

Chào các bạn, mình đang có thắc mắc như này, mình có tạo 1 ví dụ trên jsbin:
https://jsbin.com/gawobuz/
Khi màn hình lớn hơn 500 thì click vào button sẽ toggle cái class red vào cái button đấy, còn màn nhỏ hơn 500 thì ko làm gì cả
Sao code của mình thì khi resize window nhỏ hơn 500 nó cũng chạy nhỉ, mình có thiếu cái điều kiện gì ko vậy?

*grab popcorn* viết 17:02 ngày 01/10/2018

Gắn vô mà quên gỡ ra chứ s :3

p.addEventListener( 'click', () => {
            console.log('b');
            p.classList.toggle( 'red' );
        });

Xem b nó log ra nhiu lần nhé

viết 17:03 ngày 01/10/2018

ủa sao nó in ra nhiều thế nhỉ, chỗ này mình ko hiểu bạn giải thích giúp mình đc ko

Dark.Hades viết 16:52 ngày 01/10/2018

addEventListener
Có nghĩa là cứ xảy ra sự kiện là nó lại thêm 1 hàm vào trong list callback. Và nó sẽ không xóa cái sự kiện đằng trước đi.
Trường hợp của bạn phải dùng hàm on<event> để xử lí.
Ví dụ: https://stackoverflow.com/questions/641857/javascript-window-resize-event

Dark.Hades viết 16:52 ngày 01/10/2018

Fixed code:

let span = document.getElementsByTagName( 'span' )[0],
    p = document.getElementsByTagName( 'button' )[0];

let fun = () => {
  p.onclick = null;
  span.innerHTML = window.innerWidth + 'px';
  if( window.innerWidth > 500 ){

    p.onclick = () => {
      console.log('b');
      p.classList.toggle( 'red' );
    };

  }
}

window.onload = fun;

window.onresize = fun;

viết 17:00 ngày 01/10/2018

à, giống kiểu phải để default 1 event đúng ko nhỉ, cám ơn bạn nhé
mình lạm dụng hàm addEventListener quá

Bình luận về bài viết này

Chia sẻ tin đăng đến bạn bè

Gửi Messenger

Bài liên quan

0 chủ đề

0 bài viết

Tác giả nổi bật