how to detect click event on <li> and <img> with javascript?-CodePudding

I'm applying glider.js on my PHP Javascript project. I want to make it so that when the images are clicked, the page would redirect to different pages. but I can't even catch the click event on the <li> or <img> tags.. why is that?

here's my code:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="/assets/css/reset.css" />
  <link rel="stylesheet" href="/assets/css/glide.core.min.css" />
  <link rel="stylesheet" href="/assets/css/glide.theme.min.css" />
  <link rel="stylesheet" href="/assets/fontawesome-5.15.1/css/all.min.css" />
</head>

<body>
  <div >
    <div >
      <div  data-glide-el="track">
        <ul >
          <li  id="asd1"><img id="asd2" src="/assets/img/1.jpg" alt="" /></li>
          <li ><img src="/assets/img/2.jpg" alt="" /></li>
        </ul>
      </div>

      <div  data-glide-el="controls">
        <button  data-glide-dir="<">
            <i ></i>
          </button>
        <button  data-glide-dir=">">
            <i ></i>
          </button>
      </div>

      <div  data-glide-el="controls[nav]">
        <button  data-glide-dir="=0"></button>
        <button  data-glide-dir="=1"></button>
      </div>
    </div>
  </div>

  <script src="/assets/js/glide_3.5.2.min.js"></script>

  <script>
    const config = {
      type: 'carousel',
    };
    new Glide(".glide", config).mount();

    const asd1 = document.querySelector('#asd1');
    asd1.addEventListener('click', () => {
      alert('asd1');
    });
    const asd2 = document.querySelector('#asd2');
    console.log('asd', asd1, asd2);
    asd2.addEventListener('click', () => {
      alert('asd2');
    });
  </script>
</body>

</html>

CodePudding user response：

Rather than binding to specific IDs as you do here why not use a delegated event listener ( here I bound it to the document but could easily be the glide container ) and use the event to help identify which element received the click and use that as the basis of your redirect?

const config = {
  type: 'carousel',
};
new Glide(".glide", config).mount();


// a delegated listener listening for clicks on elements 
// with .glide_slide class or the image within.

document.addEventListener('click', e => {
  if( e.target.classList.contains('glide__slide') || e.target.tagName=='IMG' ) console.log( e.target );
});

.glider {
  background: goldenrod;
}

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/Glide.js/3.2.0/css/glide.core.css" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/Glide.js/3.2.0/css/glide.theme.css" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" />
<script src='//cdnjs.cloudflare.com/ajax/libs/Glide.js/3.5.0/glide.js'></script>


<div >
  <div >
    <div  data-glide-el="track">
      <ul >
        <li ><img src="//placekitten.com/200/200?image=1" alt="" /></li>
        <li ><img src="//placekitten.com/200/200?image=2" alt="" /></li>
        <li ><img src="//placekitten.com/200/200?image=3" alt="" /></li>
        <li ><img src="//placekitten.com/200/200?image=4" alt="" /></li>
        <li ><img src="//placekitten.com/200/200?image=5" alt="" /></li>
      </ul>
    </div>

    <div  data-glide-el="controls">
      <button  data-glide-dir="<">
            <i ></i>
      </button>
      <button  data-glide-dir=">">
            <i ></i>
      </button>
    </div>

    <div  data-glide-el="controls[nav]">
      <button  data-glide-dir="=0"></button>
      <button  data-glide-dir="=1"></button>
    </div>
  </div>
</div>

CodePudding user response：

Don't add events to the li and img elements at the same time. Try to console.log(event) or console.log(event.element) and debug from there on.