Solved

Browser response to mouse events

Posted on 2013-01-18
7
375 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

 

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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

If you are a web developer, you would be aware of the <iframe> tag in HTML. The <iframe> stands for inline frame and is used to embed another document within the current HTML document. The embedded document could be even another website.
This article offers some helpful and general tips for safe browsing and online shopping. It offers simple and manageable procedures that help to ensure the safety of one's personal information and the security of any devices.
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 to add subdomains to your content reports. This can be very importing in having a site with multiple subdomains.

688 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