Panzoom Image Scaling: Solve the problem of repeated triggering of click events

This document aims to solve the problem that the click event is repeatedly triggered when using the Panzoom library to implement the image click zoom function, causing the scaling failure. By analyzing the problem code, we will provide a more concise and effective solution that ensures that the image can be zoomed in and out in multiple steps as expected.

When using the Panzoom library, if you want to achieve the zoom function by clicking on the image itself, you may encounter a problem: the first click is valid, and the subsequent clicks are abnormal. This is usually caused by repeated binding of event listeners. The causes and solutions of the problem are described in detail below.

Problem analysis

The original code attempts to dynamically add a new click event listener after the first click to achieve the zoom-out function. However, this method will cause multiple click event listeners to exist simultaneously and interfere with each other. When the image is scaled to a maximum multiple, the zoom-in and zoom-out operations are triggered at the same time, resulting in confusing scaling behavior.

Solution

To solve this problem, dynamic addition of event listeners should be avoided, but instead handle both zoom in and out in the same event listener. By judging the current scaling ratio (panzoom.getScale()), we decide whether to perform the zoom in or out operation.

The following is the modified code:

 let img = document.querySelector('img');
let panzoom = new Panzoom(img.parentElement, {
  minScale: 1,
  maxScale: 2.5,
  step: 0.5,
  panOnlyWhenZoomed: 1,
  cursor: 'zoom-in',
});

img.addEventListener('click', () => {
  if (panzoom.getScale() <p> <strong>Code explanation</strong></p><ol>
<li> <strong>Single event listener:</strong> Only one addEventListener is used to listen for click events of img element.</li>
<li> <strong>Conditional judgment:</strong> In the click event handling function, use if (panzoom.getScale() </li>
<li> <strong>Zoom in/out logic:</strong><ul>
<li> If the scaling ratio is less than the maximum value (2.5), perform panzoom.zoomIn() to perform the zoom operation.</li>
<li> Otherwise, execute panzoom.zoomOut() to perform the zoom-out operation.</li>
</ul>
</li>
<li> <strong>Mouse style switching:</strong> Dynamically modify the mouse style according to the current zoom state to provide a better user experience.</li>
</ol><p> <strong>Complete HTML example</strong></p><pre class="brush:php;toolbar:false"> 


  <title>Panzoom Image Zoom</title>
  <style>
    html, body {
      height: 100%;
      width: 100%;
    }

    .offerBox_image {
      max-width: 429px;
    }

    .offerBox_image img {
      width: 100%;
      height: auto;
      margin: 0;
      padding: 0;
    }
  </style>



  <div class="offerBox_image">
    <img class="img lazy" src="/static/imghw/default1.png" data-src="https://source.unsplash.com/random/1100x1100" data-id="1" alt="">
  </div>

  <script src="https://unpkg.com/@panzoom/<a%20class=" __cf_email__ data-cfemail="f5c5d4dbcfdadad8b5819b809b85">[email protected]/dist/panzoom.min.js"></script>
  <script>
    let img = document.querySelector(&#39;img&#39;);
    let panzoom = new Panzoom(img.parentElement, {
      minScale: 1,
      maxScale: 2.5,
      step: 0.5,
      panOnlyWhenZoomed: 1,
      cursor: &#39;zoom-in&#39;,
    });

    img.addEventListener(&#39;click&#39;, () => {
      if (panzoom.getScale() < 2.5) {
        panzoom.zoomIn({ animate: true, step: 0.4 });
        console.log("Zoom in: ", panzoom.getScale());
        img.style.cursor = &#39;zoom-out&#39;;
      } else {
        panzoom.zoomOut({ step: 1 });
        img.style.cursor = &#39;zoom-in&#39;;
        console.log("Zoom out: ", panzoom.getScale());
      }
    });
  </script>

Things to note

• step parameter: step parameter controls the amplitude of each scaling. Adjust the step values ​​in the zoomIn and zoomOut methods according to actual needs.
• minScale and maxScale parameters: Make sure that the values ​​of minScale and maxScale are set reasonably to avoid scaling out of range.
• CSS Style: Adjust the CSS style according to the actual page layout to ensure that the image container and image itself have the appropriate size.

Summarize

By avoiding repeated binding of event listeners and determining whether to perform zoom in or out based on the scaling scale in a single event listener, the problem of failure of Panzoom image click zoom can be effectively solved. This method not only has a cleaner code, but also has clearer logic and is easy to maintain.

The above is the detailed content of Panzoom Image Scaling: Solve the problem of repeated triggering of click events. For more information, please follow other related articles on the PHP Chinese website!