Preventdefault() on an <A> Tag

preventDefault() on an a tag

Try something like:

$('div.toggle').hide();
$('ul.product-info li a').click(function(event) {
    event.preventDefault();
    $(this).next('div').slideToggle(200);
});

Here is the page about that in the jQuery documentation

jQuery how to enable a tag after preventDefault()

You can just set the location based on the event target.

if ( response == 'true' ) {
  window.location.href = e.target.href
}

You can not cancel the preventDefault since the call is asynchronous.

How to preventDefault on anchor tags?

UPDATE: I've since changed my mind on this solution. After more development and time spent working on this, I believe a better solution to this problem is to do the following:

<a ng-click="myFunction()">Click Here</a>

And then update your css to have an extra rule:

a[ng-click]{
    cursor: pointer;
}

Its much more simple and provides the exact same functionality and is much more efficient. Hope that might be helpful to anyone else looking up this solution in the future.

---

The following is my previous solution, which I am leaving here just for legacy purposes:

If you are having this problem a lot, a simple directive that would fix this issue is the following:

app.directive('a', function() {
    return {
        restrict: 'E',
        link: function(scope, elem, attrs) {
            if(attrs.ngClick || attrs.href === '' || attrs.href === '#'){
                elem.on('click', function(e){
                    e.preventDefault();
                });
            }
        }
   };
});

It checks all anchor tags (<a></a>) to see if their href attribute is either an empty string ("") or a hash ('#') or there is an ng-click assignment. If it finds any of these conditions, it catches the event and prevents the default behavior.

The only down side is that it runs this directive for all anchor tags. So if you have a lot of anchor tags on the page and you only want to prevent the default behavior for a small number of them, then this directive isn't very efficient. However, I almost always want to preventDefault, so I use this directive all over in my AngularJS apps.

jQuery: preventDefault() not working on anchor link tag (tried many methods!)

There are lot of event-listeners on the link. And 2 of them are listening click event. It seems like while one prevent link, other one don't.

I think trouble may be in this function, because it triggers:

function end(e) {
  clearTimeout(resetTimer);
  resetTimer = setTimeout(function() {
    w.tapHandling = false;
    cancel = false;
  }, 1000);

  // make sure no modifiers are present. thx http://www.jacklmoore.com/notes/click-events/
  if ((e.which && e.which > 1) || e.shiftKey || e.altKey || e.metaKey || e.ctrlKey) {
    return;
  }

  e.preventDefault();

  // this part prevents a double callback from touch and mouse on the same tap

  // if a scroll happened between touchstart and touchend
  if (cancel || w.tapHandling && w.tapHandling !== e.type) {
    cancel = false;
    return;
  }

  w.tapHandling = e.type;
  trigger(e);
}

event.preventdefault() issues - Trying to stop an anchor tag from loading

While not an answer as to why the event.preventDefault() isn't working, here's how I would approach this. I would adjust the html to look like this:

<div class="mainvideo">
   <iframe id="playVideo" src="https://www.youtube.com/watch?v=UAQ9-sl13zg" frameborder="0" allowfullscreen ></iframe>
 // notice ^^^^^^^^^^^^^^
        <div id="mainvideowords">
       // rest of your code

<div id="videogallery">
    <div class="littlevideo">
        <div data-link="https://www.youtube.com/embed/HsuzKk6udK8" class="video1">
       // notice ^^^^^   
    <img src="assets/placeholder.png"></div>

Then your jquery would look like this:

$(function(){
    $('div[class^="video"]').click(function(){
        var src = $(this).data('link');
        $('#playVideo').prop('src', link);
    });
});

The selector at the beginning selects any div whose class begins with 'video', so you don't have to repeat video1, video2, etc. Then, we've added a custom html5 data attribute to our clicked div that we access with the .data('src') line. See docs here: http://api.jquery.com/data/ and https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes.

Finally, by adding an id to our iframe we can select it directly and change the src of the video.

Here's a fiddle for you: http://jsfiddle.net/1sLdkyr2/1/

Prevent Default Behavior or A Tag Click Event in JavaScript Inside Ajax Call

It's not working because, the response is asynchronous. e.preventDefault() will be executed only after ajax call gets a response from the server.
You can do this.

1. Prevent Default action for all actions.
2. Wait for response.
3. If response is not 1 then unbind the preventDefault().

I have updated the for loop, and commented the changes. Kindly do check.

for (var i = 0; i < ReviewButtons.length; i++) {
        const ReviewButton = ReviewButtons[i];
        ReviewButton.addEventListener('click', function (e) {
            let newRow = ReviewButton.parentElement.parentElement;
            let AuditorName = newRow.cells[2].innerText;
            let ReviewType = newRow.cells[8].innerText;

            let ReviewTypeID = 0;
            if (ReviewType == 'Peer Review') {
                ReviewTypeID = 3;
            } else if (ReviewType == 'Team Leader Review') {
                ReviewTypeID = 4;
            }
            else if (ReviewType == 'Supervisor Review') {
                ReviewTypeID = 5;
            }

            let id = newRow.cells[0].firstChild.getAttribute('id').split('_')[1];

            $.ajax({
                url: $route,
                type: 'POST',
                data: { userName: userName, auditor: AuditorName, reviewType: ReviewTypeID, recordID: id },
                beforeSend:function()
                {
                    e.preventDefault(); //Prevent default action for all instances.
                },
                success: function (data) {
                    // if data is 1, prevent default
                    if(data != 1){
                        $(this).unbind('click'); // Restores the click default behaviour if data != 1
                        return false;
                    }

                }
            });

        }, false);
    }

---

Related Topics