Add warning to edit slug/permalink button on editor screen.

I want users to get a warning popup when they click the button to change the permalink. They will give confirmation if they want to continue.

Here is what I’ve come up with:

//Setting a variable for the button Class.
var editSlug = document.getElementsByClassName("edit-slug");

//Detecting when the button is clicked.
editSlug[0].addEventListener ( "click", function() {

//Returning the value of the popup.
return confirm('Warning: Don't do this unless you have to.');

});

The issue I am having, is even when clicking cancel, it still allows me to edit the link of my post. If I select cancel, it supposed to return a false value and cancel the event of clicking the edit button. This works fine for other buttons on WP, such as publish, update, etc.

I also am only able to generate the popup once after the page loads, if I select an answer and click edit again, I don’t receive any more popups.

WordPress has already hooked jQuery events to that button which you could omit with off() method, or keep things simple and add an overlay above that button and act as the button, prompting users to confirm the editing action at first place:

jQuery(document).ready(function($){
    var c = $('#edit-slug-buttons')
      , b = $('button',c).first();

    c.css({
        position: 'relative'
    }).append('<span class="se-overlay" style=" position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 4px 0; margin-top: -3px; cursor: pointer"></span>');


    $(document).on("click", "#edit-slug-buttons .se-overlay", function(e){
        if ( confirm("Warning: Don't do this unless you have to.") ) {
            $(this).closest('#edit-slug-buttons').children('button').first().trigger('click');
        }
        return e.preventDefault();
    });
});

Hope that helps.