Unwanted user selection.

[John Robin Dove]

Hi Clifton,

Often objects with text seem to get selected inadvertently. Sometimes it's just one object and sometimes, as in this picture, many objects. I'm not sure how this happens but it's definely triggered by the mouse buttons and / or mouse movements. Is there any way to make objects unselectable, please?



Regards
John

[Clifton]

There may be a few approaches, some using PowerPac solutions, pgTBObjSet() and/or pgStyleObject(), but others that may involve stylesheets.

The key here is to identify what the user clicks on that causes a mouseDown (or selection start) event to occur and then to block that event from happening. Dragging the mouse over most web pages can cause this to occur, but when it happens unexpectedly it is possible that some object is mis-behaving based on other actions that it must perform. Sometimes, you can delay the actions. In other cases, you can re-style those object a bit.

Can you provide more detail on what object(s) the user may be interacting with? That would help in knowing how to prevent those objects from allowing this behavior to occur.
 

[John Robin Dove]

Thanks for your reply. I've been doing some tests on simple examples. It seems to me that if you move the mouse cursor on to an object: button or field, press the left mouse button, hold it down, and move the mouse the text will be selected. This is no doubt standard html behavior (and often it is very useful). I don't think my pages are misbehaving. The more you move the mouse around carelessly The more likely it is that text will get selected. Sometimes I can even select objects with no text as in the picture below but this happens on other people's html pages too. I just think it could be a bit confusing for users and wondered if there is a way to stop it. It seems that changing the focus will unselect all selections but apart from using a timer I don't see how this could help. My program doesn't require the user to select anything.

This



should lo0k like this

[Clifton]

I haven't tried this, but you could use a stylesheet with this style definition:

* {
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}

Load it both high (level 0) and low (ToolBook frame) by calling pgExtFiles() twice (once on book load for the book and once for each page in your program for on page load) and you may be able to achieve the result you desire without jeopardizing normal buttonClicks on elements, etc. For objects that still require text selection you will have to set this to a value that allows it with the default behavior.

You can search the web for the user-select style and you may be able to get other ideas. I use this sparingly because in most of my work, preventing all user selects is usually not desirable. There is another style you can play around with and it is called "pointer-events". This one prevent the object(s) from responding to any mouse or touch behavior. I've used it to good advantage, but again you have to be careful or you can sabotage needed mouse interaction on object(s) that require it. PowerPac's pgStyleObject() supports setting the pointerEvents style. I see userSelect is not supported in pgStyleObject() but it is supported by an undocumented PowerPac function called

pg_PreventSelect(obj, reset)

. In this function obj must be the return from the function

gTBo(tbName, "objRef")

. So to use this on a per object level you could use exeJavascriptDirect():

var obj = gTBo( "your object name", "objRef" );
pg_PreventSelect( obj, false );
//Now my object cannot be selected but will still respond to buttonclicks, etc.

You could also set a class in your stylesheet which sets

user-select: none;

and just set the classname of required objects using userProperty().

As you can see there are a lot of ways to get the results you desire. You just need to experiment a little to find the one that works best for your application. The PowerPac uses some of these methods internally when needed.
 

[John Robin Dove]

OK Thanks very much. I'll see what I can do. Maybe not immediately as I'm busy on other debugging tasks at the moment.

[John Robin Dove]

I have just tried your first solution and it seems to work perfectly! Thanks again.

I have added to it to neutralize the drag property as well:

]* {
-webkit-user-select: none; /* Safari */
-webkit-user-drag: none; /* Safari */
-moz-user-select: none; /* Firefox */
-moz-user-drag: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
-ms-user-drag: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
user-drag: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}

I'm not sure that ms-user-drag exists but users would probably not be able to use my program with Edge or IE anyway.

[Clifton]

Glad this worked! It may be useful to other developers.