1

I want to hide the cursor until my function is done but I can't find how to disable it. I mean I have found how to hide it and show it but when it's hidden I can still click So how to disable it?

window.document.styleSheets[0].insertRule('* {cursor: none;}', window.document.styleSheets[0].cssRules.length);
Meteor.call("lockTheMachine", machine.nameMachine, Session.get("loggedUser"), function(err, res) {
  if (!err) {
    Session.set("lastMachineUsed", machine.nameMachine);
    window.document.styleSheets[0].insertRule('* {cursor: default   ;}', window.document.styleSheets[0].cssRules.length);
  } else {
    console.error(err);
  }
});
}
mplungjan
  • 169,008
  • 28
  • 173
  • 236
Jerome
  • 1,162
  • 2
  • 16
  • 32
  • Why not just ignore user input while the app isn't ready? – Wabbitseason Mar 30 '17 at 09:40
  • 1
    The pointer-events solution below is nice. Imho, don't hide the cursor though. End users expect there to always be a cursor to look at. So it might come across as a virus if you just completely make the pointer invisible. So disabling its functionality is preferred over hiding the cursor. – Shilly Mar 30 '17 at 09:51
  • @Shilly I haven't though about that ^^ thanks – Jerome Mar 30 '17 at 10:15

2 Answers2

4

There's a CSS property for that called pointer-events.

The CSS property pointer-events allows authors to control under what circumstances (if any) a particular graphic element can become the target of mouse events.

In addition to indicating that the element is not the target of mouse events, the value none instructs the mouse event to go "through" the element and target whatever is "underneath" that element instead.

If you were to disable any click interaction on your whole site you could simply add:

body.block { pointer-events: none; }

And trigger the class .block programatically via Javascript.

Community
  • 1
  • 1
Juan Ferreras
  • 2,801
  • 2
  • 13
  • 16
  • I'm not sure about the "trigger the class" part but I'll try – Jerome Mar 30 '17 at 10:16
  • 2
    `document.body.classList.add('block')` it's only one of the many approach you can take, as long as the rule ends up affecting that element. – Juan Ferreras Mar 30 '17 at 10:18
  • just a question, if I use `point-events:none` I can't modify the cursor aspect ? (i.e `cursor: wait`) right ? – Jerome Mar 30 '17 at 10:27
  • You can't use that on the same element (i.e. body) but you can apply the cursor to the `html` selector (or any parent of the element that has the pointer events set as none). – Juan Ferreras Mar 30 '17 at 12:44
1

You can solve your problem by simply adding the following style in your CSS file.

    button {
pointer-events: none;
}

The problem with this is that the button is not clickable but the cursor is still displayed when you hover on the button.

To overcome this problem you can add "disable" attribute to the button and add the following CSS.

button {
cursor: not-allowed; // or cursor: none;
}

When you add the css "cursor": "not-allowed" or "none" to a input type or a button, the button is still clickable. For doing the input type or button non clickable you have to add "disable" attribute.

A disabled input element is unusable and un-clickable. The disabled attribute can be set to keep a user from using the element until some other condition has been met (like selecting a checkbox, etc.). Then, a JavaScript could remove the disabled value, and make the element usable.

But when you using bootstarp library, when you disabled a button or input type, then you can't see any cursor when hover onto that element. At the newest bootstrap library, we can find this rule:

.btn.disabled, .btn[disabled], fieldset[disabled] .btn {
pointer-events: none;
cursor: not-allowed;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
box-shadow: none;
opacity: .65;
}

So I assume that bootstrap tried to implement the cursor: not-allowed for disabled buttons, or input's.

So for doing this you have to overwrite the bootstrap class for it.

But it works fine when you don't link bootstrap library in your html.

e.g.:

HTML code:

<button class="disabled-button" disabled>
I am disabled and not clickable too
</button>

CSS code:

.disabled-button {
  cursor: not-allowed;
}

or you can trigger ".disabled-button" class programmetically by javascript to unclickable it.

Arijit Sarkar
  • 11
  • 2