Solved

Browser response to mouse events

Posted on 2013-01-18
7
369 Views
Last Modified: 2013-01-24
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
Comment
Question by:steva
  • 4
  • 3
7 Comments
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 38795619
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
 

Author Comment

by:steva
ID: 38795801
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
 
LVL 83

Accepted Solution

by:
Dave Baldwin earned 500 total points
ID: 38795907
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
Microsoft Certification Exam 74-409

Veeam® is happy to provide the Microsoft community with a study guide prepared by MVP and MCT, Orin Thomas. This guide will take you through each of the exam objectives, helping you to prepare for and pass the examination.

 

Author Closing Comment

by:steva
ID: 38816547
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
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 38816910
Thanks for the points.  You can always click on "Request Attention" above to get others to look at your question.
0
 

Author Comment

by:steva
ID: 38817304
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
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 38817546
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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
WCAG audit tools 1 82
Video works in everything but Safari 11 35
Render HTML in a desktop app, not using a browser 4 82
Chrome and Firefox Java 5 32
Problem I downloaded the Microsoft Internet Explorer 9 Beta, today, to give it a test drive and maybe write a review for the site, and it failed miserably and got stuck in a crash restart loop. The error message given is as illustrated below i…
Several part series to implement Internet Explorer 11 Enterprise Mode
Google currently has a new report that is in beta and coming soon to Webmaster Tool accounts. This Micro Tutorial will highlight new features for Google Webmaster Tools.
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.

778 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question