天道酬勤,学无止境

Prevent mousedown event on input range html element and still let user drag slider

Question

So is there a way to disable mousedown and / or click event on input range element but at the same time let user drag slider around and still fire on change event?

Disable clicking on line but still enable slider to be dragged around. I would like to prevent users to jump (with mousedown / click) in the middle of slider but I wanna let them drag it so value changes.

<input id="slider" name="slider" type="range" value="-1" min="-1" max="30" step="1" />

This does not help as on change for range gets called and messes up numbers.

$slider.on('mousedown', function(event) {
    //event.preventDefault();
    this.value = -1;
    /* Act on the event */
    console.log("mousedown");
});
 $slider.on('click', function(event) {
    event.preventDefault();
    this.value = -1;
    /* Act on the event */
    console.log("click");
});

If I call event.preventDefault(); on mousedown slider does not work and can not be dragged around. Is there a way around that.

I am trying to recreate this effect in html is there any jQuery effect for this kind a zoom?

Answer1

You can use CSS pseudos-classes to give the thumb of the input pointer-events:auto (allow mouse events) and give the rest of the range input pointer-events: none (do not allow mouse events).

See: pointer-events

input[type=range]{
  pointer-events: none;
}
input[type=range]::-webkit-slider-thumb{/*Webkit Browsers like Chrome and Safari*/
  pointer-events: auto;
}
input[type=range]::-moz-range-thumb{/*Firefox*/
  pointer-events: auto;
}
input[type=range]::-ms-thumb{/*Internet Explorer*/
  pointer-events: auto;
}
<input type="range" value="0" min="0" max="100"/>
Answer2

Here's a pure CSS solution

You can control parts of the range with CSS and in that way disable the pointer events for all of those parts them except the thumb of the slider. In this way, click events are only registered when the button of the slider is clicked.

pointer-events: none;          // disable all event on the range

Use the pseudo-class selectors to target the thumb and cover all major browsers like this.

input[type=range]::-webkit-slider-thumb {   // support webkit (e.g. Chrome/Safari)
input[type=range]::-moz-range-thumb {       // support for Firefox
input[type=range]::-ms-thumb                // support for IE 

Here's how that would look in action.

$("#slider").on('mousedown', function(event) {
  console.log('Mouse-down: only fired when thumb of the range is clicked');
});
$("#slider").on('mouseup', function(event) {
  console.log('Mouse-up: only fired when thumb of the range is clicked');
});
input[type=range] {
  pointer-events: none;
}

input[type=range]::-webkit-slider-thumb {
  pointer-events: auto;
}

input[type=range]::-moz-range-thumb {
  pointer-events: auto;
}

input[type=range]::-ms-thumb {
  pointer-events: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="slider" name="slider" type="range" value="-1" min="-1" max="30" step="1" />

More information on pointer-events can be found in the MDN docs.

Answer3

You could use pure CSS

#slider {
    pointer-events: none;
}
Answer4

Here is my try:

//First block control click + move event
var current_value = $("#slider").val();
$("#slider").on('mousedown', function(event) {
    $("#slider").on("mousemove", function (e) {
    if ($("#slider").val() == parseInt(current_value)+1
    || $("#slider").val() == parseInt(current_value)-1) {
      current_value = $(this).val();
    } else {
      $("#slider").val(current_value);
    }
    })
});

//Second block control click on line
$("#slider").on("mouseup", function() {
      if ($("#slider").val() == parseInt(current_value)+1
    || $("#slider").val() == parseInt(current_value)-1) {
      current_value = $(this).val();
    } else {
      $("#slider").val(current_value);
    }
})

NB : if you move to fast the slider, it will jump step, and then back to initial position.

JSFiddle : https://jsfiddle.net/xpvt214o/674502/

Answer5

Why not use "mouseup" instead of "click"?

$("#slider").on('mousedown', function(event) {
    //event.preventDefault();
    /* Act on the event */
    console.log("mousedown", this.value);
});
 $("#slider").on('mouseup', function(event) {
    //event.preventDefault();
    /* Act on the event */
    console.log("mouseup", this.value);
});

Is this what you are trying to accomplish? Experiment with the fiddle if you'd like. :-)

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.

相关推荐
  • Jquery mousedown + mousemove
    Question How can I create an event in JQuery triggered when the mouse is down and moving? And only triggered once each mousedown + mousemove? Answer1 Updated: So, it looks like if your mouse is no longer over the element on which onmouseup is bound, it won't see the mouse up event. Makes sense, when you stop and think about it, but when the mousedown event happens over the element, we expect, as UI users, for it to know when it was released (even if it isn't over the element). So, to get around this, we actually detect the mouseup on the document level. var clicking = false; $('.selector')
  • Scroll the page on drag with jQuery
    Question I have tried using kinetic.js and the code below, however when I try this in IE11 it keeps jumping to the top every time I scroll: $("html").kinetic(); I want to make the page scrollable on tablets and IE10 and 11 so that users can just push the page up to scroll down as you would on mobile devices. How can I do this in pure-JS or jQuery without it jumping to the top? Answer1 You can do this quite simply by recording the position of the mouse when clicked, and the current position when being dragged. Try this: var clicked = false, clickY; $(document).on({ 'mousemove': function(e) {
  • Can't find element in DOM after loading it with ajax (want to bind jquery plug in to it)
    Question So I have 2 html pages. 1 that functions as container and 1 that functions as content. When I load the content page with a table I'm able to use drag and drop. But when I go to my container page and load the content page into a div with ajax, the drag and drop stops working. All other javascript functionalities inside the content page still work. How can I bind the jquery dnd plugin to the table loaded with ajax? I'm using drag & drop with this as tutorial http://isocra.com/2008/02/table-drag-and-drop-jquery-plugin/ my code looks like this: $(window).load(function() { if(temp == 0) {
  • Touch event handler overrides click handlers
    Question I am creating a custom draggable directive in AngularJS. It's a combination of jQuery events and vanilla javascript. I am trying to make this as generic and re-useable as possible, and it also has to be touch friendly. TL;DR I can't click the button on my draggable directive in touch environments. Steps to reproduce: Open the codepen example: CodePen On Chrome, F12, emulate iPad 3/4 Drag the panel by the title = works! Click the button = no alert. Longer Explanation The directive optionally makes the entire element it's placed on draggable, unless an element with the class "drag
  • How to implement a drag-and-drop div from scratch with JavaScript?
    Question It should be a combination of CSS and JavaScript. The steps to do should be: Make it on top of all other elements (which property to specify?) Catch the event when it is clicked (which event to listen to?) Move the div as mouse moves. But what are the details? Answer1 The jQuery Way: Check out the jQueryUI addons draggable and droppable. Literally hundreds of hours have been invested into the jQuery framework to make complicated tasks like this almost trivial. Take advantage of the jQuery team's efforts to make programming rich cross-browser applications easier on us all ;) Chuck
  • jquery input select all on focus
    Question I'm using this code to try and select all of the text in the field when a user focuses on the field. What happens is, it selects all for a second, then its unselected and the typing cursor is left where I clicked... $("input[type=text]").focus(function() { $(this).select(); }); I want it all to remain selected. Answer1 Try using click instead of focus. It seems to work for both mouse and key events (at least on Chrome/Mac): jQuery < version 1.7: $("input[type='text']").click(function () { $(this).select(); }); jQuery version 1.7+: $("input[type='text']").on("click", function () { $
  • Responding to the onmousemove event outside of the browser window in IE
    Question In Internet Explorer 7 body onmousemove or document.onmousemove events only seem to fire while the mouse is inside the browser window, not when it's outside. Yet in Firefox the onmousemove event is called correctly when I move outside of the browser window. How can I setup an event to be called outside of the browser window in IE? Google Maps does this in IE. If you hold the mouse button down and move the mouse outside of the browser window you can see that the map still moves. Answer1 (Note: this answer refers exclusively to the "standard" drag implementation of mousedown ->
  • Making a dragbar to resize divs inside CSS grids
    Question The bounty expires in 5 days. Answers to this question are eligible for a +50 reputation bounty. iota wants to reward an existing answer. I have 2 boxes and a vertical div line in one unique container div (code and fiddle below). I'm using CSS grids to position my elements inside the container What I'd like to accomplish is to use the vertical line to resize horizontally the two boxes based on the position of the vertical line. I apologize if the question is noobish, I am new to web development, only used Python before, already tried to google and stackoverflow search but all
  • jQuery detect mousedown inside an element and then mouseup outside the element
    Question I have something similar to a drawing canvas, and I capture it's state on mouseup for undo purposes. The canvas isn't full screen, so you can draw with a brush and release outside the canvas. Something like this: $("#element").mousedown(function(){ $(document).mouseup(function(){ //do something }); }); But this doesn't work of course. A plain $(document).mouseup doesn't work either, because I have many other UI elements and it saves the state each time you click on a UI element. Any ideas? Answer1 var isDown = false; $("#element").mousedown(function(){ isDown = true; }); $(document)
  • contenteditable and non button elements
    Question I can easily do execcommand on a contenteditable selection if using a button. However using any other element fails. http://jsbin.com/atike/edit Why is this and how can I make it work using a div element. Thanks. Answer1 You could save the selection by using the mousedown event on the element being used instead of a button and restore it again after focussing the editable element in the click event. I've modified the example code: http://jsbin.com/atike/40/edit. Here's the code: function saveSelection() { if (window.getSelection) { sel = window.getSelection(); if (sel.getRangeAt &&
  • How can I highlight a word/term quicker and smarter?
    Question I have some text: <p class="drag">Hello world, Attack on Titan season two!</p> Currently, if a user wants to highlight a word/term with the cursor, they will click and drag, letter by letter. I want this process to be quicker. For example, if the user starts to highlight At, it should auto highlight the rest of the word, Attack. So the empty space is the divider. I am aware this is possible by dividing the words into divs, but I am hoping for a solution with pure text within one <p> tag. Answer1 You can do that with pure JS using Range and selectionRange objects. HTML: <div id=
  • How to prevent the drag if the user clicks the round in d3.js?
    Question I have group element it has circle and rect elements. User can drag the group element, so both rect and circle element will move. It is working fine. But I need to prevent the drag if the user clicks on the circle element. JS Fiddle const x = 100; var y = 100; var grid = d3.select("#svg-area"); var g = grid.append("g") .attr("transform", `translate(${x},${y})`) .call(d3.drag() .on("drag", function() { var x1 = d3.event.x - 30; var y1 = d3.event.y - 10; d3.select(this).attr("transform", "translate(" + (x1) + "," + (y1) + ")") })); newNode(g); function newNode(g, text) { var textWid =
  • Text input box not accepting input in modal from Angular UI Bootstrap
    Question I have a modal (nbr 1) that I open from another modal (nbr 2). The modal nbr 1 works fine and is showing the things it should. But I tried to put an input to filter items in the modal, but the input is not working. I can't write anything in it, it's just not accepting my input. I think this has something to do with the fact that it's is my second modal, since when I'm opening it from the "root" (not opening it from another modal), the text inputs works fine. Here's my html: <div class="modal-header"> <h3 class="modal-title">Pick a student</h3> <div class="modal-body"> <!-- I can't
  • YES/NO - is there a way to improve mouse dragging with pure SVG tools?
    Question So I was spending some time playing around with pure (no external libraries) SVG elements dragging. In general all works, but there is this nasty issue for fast moving mouse: - when user mousedowns a draggable SVG element close to its edge - then drags (mousemove) such draggable too fast - the mouse "loses" the draggable Here the issue is described in more details: http://www.svgopen.org/2005/papers/AdvancedMouseEventModelForSVG-1/index.html#S3.2 Also here the author tried to fix UX by leveraging mouseout event: http://nuclearprojects.com/blog/svg-click-and-drag-object-with-mouse-code
  • Disable dragging an image from an HTML page
    Question I need to put an image in my page. I want to disable dragging of that image. I am trying lot of things but no help. Can somebody help me out ? I don't want to keep that image as a background-image because I am resizing the image. Answer1 You can like this... document.getElementById('my-image').ondragstart = function() { return false; }; See it working (or not working, rather) It seems you are using jQuery. $('img').on('dragstart', function(event) { event.preventDefault(); }); Answer2 CSS only solution: use pointer-events: none https://developer.mozilla.org/en-US/docs/CSS/pointer
  • jQueryMobile: how to work with slider events?
    Question I'm testing the slider events in jQueryMobile and I must been missing something. page code is: <div data-role="fieldcontain"> <label for="slider">Input slider:</label> <input type="range" name="slider" id="slider" value="0" min="0" max="100" /> </div> and if I do: $("#slider").data("events"); I get blur, focus, keyup, remove What I want to do is to get the value once user release the slider handle and having a hook to the keyup event as $("#slider").bind("keyup", function() { alert('here'); } ); does absolutely nothing :( I must say that I wrongly assumed that jQueryMobile used
  • Preventing click event with jQuery drag and drop
    Question I have elements on the page which are draggable with jQuery. Do these elements have click event which navigates to another page (ordinary links for example). What is the best way to prevent click from firing on dropping such element while allowing clicking it is not dragged and drop state? I have this problem with sortable elements but think it is good to have a solution for general drag and drop. I've solved the problem for myself. After that I found that same solution exists for Scriptaculous, but maybe someone has a better way to achieve that. Answer1 A solution that worked well
  • Is there a way to use event.preventDefault with focusOut? If not, why?
    Question I would like to prevent the default event from a focusOut (or blur) event and keep the focus set to the specific input field. This is what I have already tried: using event.preventDefault() at the beginning and at the end of the function (for test purposes, not for style) return false; to prevent propagation setting the focus back to the element directly in the element (but I found that the focus still switches because the focus switch is executed after the .on() function executes. I know I could use setTimeout, but I’d like to avoid it and figure out the heart of the issue.) using
  • jQuery Sortable List - scroll bar jumps up when sorting
    Question I created a demo: http://pastebin.me/584b9a86d715c9ba85b7bebf0375e237 When the scroll bar is at the bottom and you drag items to sort them, it causes the scroll bar to jump up. It seems to do this in FF, Safari, Chrome, and IE (at least IE8). In Firefox on my Mac, it does the jump up when the scroll bar is at the bottom, but also adds a nice flash to the whole list. It just flashes the whole list right as it scrolls it up. I believe that if I figure out what is causing the scroll up (and if I can stop it), the flashing will stop as well. I don't like it jumping up like that b/c I find
  • Unable to remove an (bound) event listener
    Question I am a newbie on javascript and I am encountering the following problem, which I wasn't able to find in previous answers after searching multiple times (hope this is not a duplicate). I have the following module/class. Let's suppose that I am trying to implement a component which can be dragged around the screen. When the user clicks on it the first time, we start to listen to the mousemove events of the window to know where the user is moving the mouse to. Once the user releases the mouse, we want to remove the event listeners of the window. The code is quite straight forward, and it