[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 378
  • Last Modified:

Browser response to mouse events

I've been poking around inside the TinyMCE editor code and I notice that after I insert an image into the text area I can mousedown on the image and four handles appear around the image.  I've searched all  through the TinyMCE source for where these handles are added and I've come to the conclusion that TinyMCE doesn't add them.  It appears that the browser sends the mousedown event to TinyMCE, TinyMCE does what it needs to do with the event and then exits, passing control back to the browser, and only then do the handles appear.  So it looks like the browser is adding these handles, not TinyMCE.

First, can anyone verify that this is indeed what happens: the browser is adding the handles.

Second, browsers don't always add handles when you click an image on a page that it's loaded,  so when do browsers behave this way?  Does the browser have to be put into a certain mode to exhibit this behavior?

Third, when you hover over one of these handles the cursor changes to a two-head arrow, inviting you to drag that side to resize the image.  Is this also being done by the browser?

Thanks for any info on these questions.  And any pointers to documents that talk about what browsers are able to do in response to mouse events would be most helpful.

Thanks,
Steve
0
steva
Asked:
steva
  • 4
  • 3
1 Solution
 
Dave BaldwinFixer of ProblemsCommented:
The first question is... Which Browser?  They are not identical and don't always act the same.  Open the page in a different browser and see if it still happens there.
0
 
stevaAuthor Commented:
I was using Firefox 18.0, but IE9 is the same.  Safari and Chrome are a bit different: the handles appear on the mouseup instead of the mousedown. (This pretty much proves that it's the browser that brings up the handles since the same TinyMCE code is running in all cases but two different behaviors are seen.)

In all cases the browser lets you click the image to bring up handles and then lets you drag a handle to resize the image.  Where is it documented that browsers must do this?

What else do browsers do on their own in response to mouse events, and where is this all documented?

Thanks
0
 
Dave BaldwinFixer of ProblemsCommented:
I doubt that it is documented and I doubt that they 'have to'.  The different browsers do try to keep up with each other.  But there are a lot of behaviors that are not part of any written standard.  IE uses a different font rendering engine than the others do.  Each browser has it's own implementation of javascript and though there is an extensive standard for that, they still aren't 100% exactly the same.  Javascript is where the 'mouse events' or at least the actions started by them are handled.
0
[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

 
stevaAuthor Commented:
Dave,

I didn't really see an answer in what you wrote, but no one else wrote anything at all, so I'll give you the points for the thoughts.
0
 
Dave BaldwinFixer of ProblemsCommented:
Thanks for the points.  You can always click on "Request Attention" above to get others to look at your question.
0
 
stevaAuthor Commented:
Oh!  I thought that got the attention of the moderator.

By the way, I did find some information.  Mozilla has a paper at https://developer.mozilla.org/en-US/docs/Rich-Text_Editing_in_Mozilla.

Basically, if you turn on designMode for a document you get things like handles around images for resizing. It also exposes the execCommand() method for the document which lets you request that the browser do things like bold or italicize selected text.  There's also a contentEditable attribute you can set for elements, that just makes those editable.

As you said, not everyone implements it the same, but they all make an effort.
0
 
Dave BaldwinFixer of ProblemsCommented:
Yes, it gets the attention of the moderator and you can ask them to send out requests for more experts.

Glad you found some of what you were looking for.
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now