logo
down
shadow

How to prevent default Css scroll onclick and allow javascript event only?


How to prevent default Css scroll onclick and allow javascript event only?

By : xue jiang
Date : November 21 2020, 11:01 PM
I wish this helpful for you Here is what i have implemented using the two buttons.
Your question cant do without jquery scrollTop function
code :
function preventDefault(e) {
  e = e || window.event;
  if (e.preventDefault)
      e.preventDefault();
  e.returnValue = false;  
}
function event1() {
  console.log('Event triggered');
  if (window.addEventListener)
      window.addEventListener('DOMMouseScroll', preventDefault, false);
  window.onwheel = preventDefault;
  
}

function event2() {
  console.log('Event triggered');
    if (window.removeEventListener)
        window.removeEventListener('DOMMouseScroll', preventDefault, false);
     
    window.onwheel = null; 
     
}
<!DOCTYPE html>
    <html>
       <head>
          <style>
             .mydiv {
             border: 1px solid black;
             height: 100px;
             overflow-y: auto;
             }
             .container {
             padding-top: 25px;
             position: relative;
             }
             .event {
             position: relative;
             top:0;
             border: solid 2px black;
             color: red;
             }
            .event1 {
             position: relative;
             border: solid 2px black;
             color: red;
             }
             .event1:hover {
             cursor:pointer;
             }
            .event2:hover {
             cursor:pointer;
             }
          </style>
         
       </head>
       <body>
          <div class="container">
            <span class="event1" type="button" onClick='event2();'>CLICK ME to enable scrolling (scroll down before) </span>
             <div class="mydiv">
                
                Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>
             </div>
            <span class="event2" type="button" onClick='event1();'>CLICK ME to disable scrolling (scroll down before) </span>
          </div>
          <p>For some reason, this html code has to keep this structure. When the user click of event listener, the div should not scroll up.</p>
       </body>
    </html>


Share : facebook icon twitter icon
How to prevent default event handling in an onclick method?

How to prevent default event handling in an onclick method?


By : user3415955
Date : March 29 2020, 07:55 AM
this one helps. Let your callback return false and pass that on to the onclick handler:
code :
<a href="#" onclick="return callmymethod(24)">Call</a>

function callmymethod(myVal){
    //doing custom things with myVal
    //here I want to prevent default
    return false;
}
<a href="#" id="myAnchor">Call</a>
// Code example using Prototype JS API
$('myAnchor').observe('click', function(event) {
    Event.stop(event); // suppress default click behavior, cancel the event
    /* your onclick code goes here */
});
how to prevent popup javascript onclick event

how to prevent popup javascript onclick event


By : Manuel Michel
Date : March 29 2020, 07:55 AM
Any of those help Don't make it a link. Make it a span or whatever. Also... what do you mean by "function is loaded from another site". If the script is loaded that should not influence things.
Javascript - prevent onclick event from being attached to all elements with same class

Javascript - prevent onclick event from being attached to all elements with same class


By : Juan Limon
Date : March 29 2020, 07:55 AM
may help you . I'm working on a simple form that includes an input field where the user will fill in the required amount by clicking the incrementor/decrementor. The form is created based on data pulled dynamically from the database , The line
code :
$(".purchase_quantity").val(num); 
$(this).siblings('.purchase_quantity').val()
$(this).siblings('.purchase_quantity').val(num)
Javascript prevent default onclick in code

Javascript prevent default onclick in code


By : user6758657
Date : March 29 2020, 07:55 AM
around this issue I know that i can do , Put it as a parameter in your on click handler
code :
document.getElementById('elementId').onclick = function(event){    
event.preventDefault()    
}
Javascript: Prevent an onClick event from being run more than once

Javascript: Prevent an onClick event from being run more than once


By : kalyan
Date : March 29 2020, 07:55 AM
I hope this helps you . Actually, you don't specify the id of your newDiv, therefore the problems.
But you don't even need to do it. Just unset the click handler.
Related Posts Related Posts :
  • HTML Video autoplay not working with bxSlider on Chrome
  • Why is the W3 Validator stating that there is a closing </p> with no opening one?
  • Set collapsing priority without applying flex to CSS items?
  • Image 100% height of container - min-height behaves differently on Chrome/Safari
  • Unable to send canvas div to front
  • IE creates unnecessary offset on menu subitems
  • External media query for CSS not working in Chrome
  • Bootstrap align an item to left of a button
  • dynamic updating of HTML5 canvas
  • CSS: Deleting and ignoring respectively all previous properties?
  • h1, h2, h3 around Microdata markup
  • Angular 2 Checkbox Two Way Data Binding
  • Image to Fit Containing Div
  • Fixed width for table first column
  • How can I alter the formatting of pandoc footnote marks?
  • push is not a function Angularjs error
  • Angular2 Call method in Template
  • Stop playing video in iframe when modal is closed
  • Bootstrap. Can't change navbar link color. Even with ID
  • Making a position:absolute div stay in place on page resize
  • Can we reference contents of <defs> across multiple <svg> elements?
  • Kendo Chart Databinding - Local Json Data with schema
  • Box shadow appearing from right to left
  • BEM element nest naming and sass rule
  • How to vertically center text next to image?
  • Responsive full width input with button
  • Make three headings in line. One to be on the left, second on center and third on the right?
  • XPath for all child elements before a certain sibling?
  • CSS Media Query not accounting for screen density?
  • How to stop second navbar from overlapping fixed navbar at the top of the page
  • List Indentation same x-cord as header
  • Sending file input doesn't work
  • Scale div padding according to screen width
  • Flexbox doesn't work in summary tag
  • CSS - mobile responsive issue with absolute positioning
  • Align image slider at the same bottom using css (Slick Carousel library)
  • Input border CSS
  • Define a custom <a> tag in CSS?
  • How to write vertical text from bottom to top without using transform rotate?
  • Text sometimes warping, sometimes not
  • CSS Correctly positioning pseudo element
  • Center Cropping Image
  • How to wrap a block around a div tag?
  • How to make a tight cell around text and expand empty ones?
  • make exact padding on text
  • position:relative started working different than at first (asp.net)
  • Html does not display in 1/2 columns
  • Positioning shapes to website
  • overwrite another tag in CSS
  • How to calculate sum on change?
  • Why do the browsers automatically wrap text of a web page without any indication about how to do it?
  • Sizing and positioning a border property
  • How do I float div's to the bottom of a page?
  • Responsive html with absolute position text inside relative positon picture
  • Flexbox doesn't work in IE 10
  • AngularJS shopping cart app: Disable button when quantity < 2
  • How to select element by order ? - Css
  • How to apply animation on the list items such that during an instance of time only one list item is visible?
  • responsive CSS - display:inline UL breaking into 2 lines, seems to have enough space
  • Reduce space between responsive div or classes html/css3
  • shadow
    Privacy Policy - Terms - Contact Us © soohba.com