Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to disable link when hold click html

I’m making an image track so when I click down to drag the track I got jump into the href so I cannot drag the track while I’m holding down to the image and only the outside of the track

document.getElementById("image-1").onclick = function () {
  location.href = "section-1.html";
};

document.getElementById("image-2").onclick = function () {
  location.href = "section-2.html";
};

document.getElementById("image-3").onclick = function () {
  location.href = "section-3.html";
};

document.getElementById("image-4").onclick = function () {
  location.href = "section-4.html";
};

document.getElementById("image-5").onclick = function () {
  location.href = "section-5.html";
};

I tried this on image-1 and nothing happen

document.getElementById("image-1").addEventListener("contextmenu", function(event) {
  event.preventDefault();
});

document.getElementById("image-1").addEventListener("click", function() {

});

I’m expecting to disable the href when hold click but it is still able to click when click once

Tags:

2

Answers


  1. 0

    By registering separate handlers for click and drag actions you can define different actions for each of them.

    You have two separate events:

    • drag event – executed when the element is dragged
    • click event – executed on mouse click (down and up)
    const img = document.getElementById('test');

test.addEventListener('click', () => {
  console.log('click');
  // Perform your onClick action
})

test.addEventListener('drag', () => {
  console.log('drag');
  // Perform your onDrag action
})
    <img id="test" src="https://placehold.co/400">

    If this implementation is not what you want you can probably look into using:

    And measuring the time difference between mouse down (click) and mouse up (release). Then based on your time threshold have a different action e.g.

    • If events are within 100ms – perform click actions
    • If events are more than 100ms apart – perform hold actions
    Login or Signup to reply.
  2. 0

    One way to achieve this is to use the onmousedown, onmousemove, and onmouseup events to detect when the user is dragging the image.

    HTML code:

    <div id="image-track">
  <img src="path/to/image-1.jpg" data-href="section-1.html" />
  <img src="path/to/image-2.jpg" data-href="section-2.html" />
  <img src="path/to/image-3.jpg" data-href="section-3.html" />
</div>

    JavaScript code:

    // Get the image track element
var imageTrack = document.getElementById("image-track");

// Set the initial position of the image track
var initialX = 0;
var currentPosition = 0;

// Add the mousedown event listener to start dragging the image track
imageTrack.onmousedown = function(event) {
  // Save the initial position of the mouse
  initialX = event.clientX;
  
  // Add the mousemove event listener to update the position of the image track
  document.onmousemove = function(event) {
    // Calculate the distance moved by the mouse
    var distance = event.clientX - initialX;
    
    // Update the position of the image track
    currentPosition += distance;
    imageTrack.style.transform = "translateX(" + currentPosition + "px)";
    
    // Reset the initial position of the mouse
    initialX = event.clientX;
    
    // Prevent the default action (i.e. selecting text or images)
    event.preventDefault();
  }
  
  // Add the mouseup event listener to stop dragging the image track
  document.onmouseup = function() {
    // Remove the mousemove and mouseup event listeners
    document.onmousemove = null;
    document.onmouseup = null;
    
    // Determine the index of the current image in the image track
    var currentIndex = Math.round(currentPosition / imageTrack.clientWidth);
    
    // Get the current image and its href
    var currentImage = imageTrack.children[currentIndex];
    var href = currentImage.getAttribute("data-href");
    
    // Navigate to the href
    location.href = href;
  }
};

    CSS code:

    #image-track {
  display: flex;
  overflow-x: hidden;
}

#image-track img {
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  cursor: pointer;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search