How to disable all actions of hyperlink and submit form but can drag these elements

Question

I use JavaFx WebView to show a web page but I don't want to have any interaction(location change) on web page and web engine disabled Javascript also. Because of that reason, I tried to disable all actions of hyperlink and submit form by

a[style] {
    pointer-events: none !important;
    cursor: default;
}

input[style] {
    pointer-events: none !important;
    cursor: default;
}

So I can not drag them. Have another way for this issue? Solve it by CSS or JavaFx as better.
Thanks for advance.

Do you want do disable button and hyperlink? – Hendry Tanaka Oct 16 '14 at 04:54 — Hendry Tanaka, Oct 16 '14 at 04:54
I still want to visible and drag them – Nam Nguyen Oct 16 '14 at 05:08 — Nam Nguyen, Oct 16 '14 at 05:08

score 1 · Answer 1 · edited May 23 '17 at 10:25

1

Using Jquery:

$('input[type="submit"]').attr('disabled','disabled');

and

$('a').attr('disabled','disabled');

like this

edited May 23 '17 at 10:25

Community

1
1

answered Oct 16 '14 at 04:58

Hendry Tanaka

454
3
11

Thanks, but I blocked Javascript execution – Nam Nguyen Oct 16 '14 at 05:03
Can you find your answer in [this](http://stackoverflow.com/questions/17871329/disabling-a-button-in-javafx) question? – Hendry Tanaka Oct 16 '14 at 05:08

score 1 · Answer 2 · answered Oct 16 '14 at 05:06

You can attempt to prevent the default action on as many events as you like. Note that browsers usually allow this, but do have the final say (I vaguley remember some issues with this not always working).

var events = ["keypress","click","submit","focus","blur","tab"];
events.forEach(function(eventName){
    window.addEventListener(eventName, function(e){
        // this is the list of tags we'd like to prevent events on
        // you may wish to remove this early return altogether, as even a div or span
        // can cause a form to submit with JavaScript
        if (["INPUT","A","FORM","BUTTON"].indexOf(e.tagName) === -1) {
            return;
        }

        // prevent the default action
        e.preventDefault();

        // stop other JavaScript listeners from firing
        e.stopPropagation();
        e.stopImediatePropagation();

        // if an input is somehow focused, unfocus it
        var target = e.target;
        setTimeout(function(){
          if (target.blur) target.blur();
        }, 50);
    // true as the third parameter signifies 'use capture' where available;
    // this means we get the event as it's going down, before it starts to bubble up
    // our propagation prevention will thus also prevent most delegated event handlers
    }, true);
});

You cannot solve this with CSS. pointer-events doesn't allow you to specify which pointer events are okay. For that, you do need JavaScript.

How to disable all actions of hyperlink and submit form but can drag these elements

2 Answers2