When double- (or triple-) clicking on some text, it gets highlighted. Way to switch that behavior off?

Question

So, I've noticed some default behavior that I'd ideally like to eliminate. I really don't think it's advantagous to allow the user to double-click and select a word. Or triple-click and select the entire passage. If they really want to copy paste from the story, they can just drag what they want like normal people do.

Anyway, when clicking +/- links, often times you're clicking doubles and triples and making a mess out of things. So... my question:

Is there a way to turn that behavior off? Or is it embedded into the actual browser behavior, and hence hardwired or such?

Answer 1

The behaviour you describe is a feature of the web-browser (and operating system) you are using, and you can test this by visiting any web-page and 'double' / 'triple' clicking.

It is possible to disable that behaviour using Javascript by overriding the standard mouse-down event handler however that same handler is used to handle the selection of items like links & buttons on a page so much care needs to be taken.

You can also use CSS to alter one of the web-browser specific user-select related properties (like -moz-user-select,  -webkit-user-select, or -ms-user-select) however these properties are still experimental and are not guarantied to work in all brands or versions of web-browser.

Personally I would not try to remove this behaviour because:
a. It is an expected behaviour.
b. Techniques used to suppress this behaviour don't produce consistent outcomes, which could confuse the end-user, which in turn can result in them complaining to you.

Comments

Oh fair enough. It's a bit unsightly, when clicking though links pretty quickly. But, I guess it's harmless. It might be good if there could be a designated span within sugarcube that disabled that functionality, which you could apply to critical elements.

But, as you say, maybe it's just too wide and varied between browsers to look at? Who knows.

---

If you expect a player may mash a link, a button might be more suitable, as they shouldn't highlight on most browsers.

---

Yeah, that's not a bad idea. I wasn't planning to use buttons, since it's just a cheats section I'm working on. But, I guess that would solve the problem. Can't make the buttons too fancy though. :P

---

The relevant CSS property user-select (and vendor prefixed versions) is:

• Not standard and, last I checked, not on a standards track.  At all.
• Do not always work as you might hope.
• Aren't supported by all browsers you'd expect based on the vendor prefixes.

Beyond that, SugarCube does use user-select in various places, but given the issues above it's really more of a best effort kind of thing.  That said, it doesn't get used on normal links, because nobody wants that.

I'll second the suggestion of using the <<button>> macro or rolling your own <button>.

That said, if you really wanted to use links, it would be trivially easy to wrap a set of links in markup which applies it or to use a passage tag—if it's an entire passage of cheat links, then a passage tag would likely be easiest.  Something like noselect for the tag and the relevant style might look like the following:

.passage.noselect a {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

PS: If you're doing something number-spinner-y, you might want to look at the <<numberpool>> macro set (on SugarCube's website under Add-ons).

---

Ah cool. Thanks for the information. Yeah, I have decided to go with buttons. I just replaced the <<link>> with <<button>>. I'm just adjusting the look of them now. But, they do seem to function well with clicktie-click type tasks.

---

Wow this actually works really well. I use a lot of cyclinglinks for one page of mine. And before, if you clicked through the choices a little too quickly, you'd end up selecting a whole bunch.

I had to change it slightly, for it to work:

.passage .noselect a {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

But, that's probably what you intended, yes? Anyway, I'm gonna apply this to all my cyclinglinks, since it's a good fit. Thanks so much for this!

---

They only thing I may have to come up with is a way for the user to turn it off, so that if they do have the intention of copying sways of the story (for whatever reason), they can. I'm not sure where to put that kind of option though. Maybe in settings.

---

But, that's probably what you intended, yes?

No.  If you're using it as a passage tag, which was what I was referring to, then the sibling class form—i.e. with no space between them—is correct since they are sibling classes, both on the passage element.  If you put a space between them, then that signifies that the .noselect element is a descendant of the .passage element.  I'm not sure what you're doing, but it wasn't what I was talking about.

That said.  It doesn't really matter, as long as you have it working for your setup.

 

They only thing I may have to come up with is a way for the user to turn it off, so that if they do have the intention of copying sways of the story (for whatever reason), they can. I'm not sure where to put that kind of option though. Maybe in settings.

A setting would be easy, if allowing players to select links is important.

Try the following JavaScript:

var settingNoselectHandler = function () {
	if (settings.noselect) { // is true
		$('html').addClass('select');
	}
	else { // is false
		$('html').removeClass('select');
	}
};
Setting.addToggle('noselect', {
	label    : 'Allow links to be selected?',
	default  : false,
	onInit   : settingNoselectHandler,
	onChange : settingNoselectHandler
});

And the accompanying style, which should work both with the setting and with whatever setup you're using:

html[data-tags~="noselect"]:not(.select) .passage a {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

 

---

Oh right! I hadn't viewed it as adding a noselect /tag/. All I was doing yesterday was adding  .noselect  classes around individual links.

But, the tag makes it a whole lot more useful. There's only really one page I'll be using this with. It's one where a lot of quick, frenzied clicks might be expect from the user. So, having the ability to turn them off is great, since it makes the passage normal again. I called it "Quick-Links mod". Since I think that has a nice ring to it.

Anyway, this is a definite keeper! Thanks a lot! Works really great.