| how to get the cooridnates | ||
| on and off methods | ||
| The syntax for using on() and off() methods is very similar to using bind() and unbind() methods. The following example is the same example we worked with in Part 33. Instead of using bind() and unbind() we are using on() and off() methods. | ||
| <html> | ||
| <head> | ||
| <title></title> | ||
| <style> | ||
| .ButtonStyle { | ||
| background-color: red; | ||
| cursor: pointer; | ||
| font-weight: bold; | ||
| color: white; | ||
| } | ||
| </style> | ||
| <script src="jquery-1.11.2.js"></script> | ||
| <script type="text/javascript"> | ||
| $(document).ready(function () { | ||
| $('#btnClickMe').on('click mouseover mouseout', function (event) { | using on we can give more than one events | |
| if (event.type == 'click') { | ||
| $('#divResult').html('Button Clicked at ' + 'X = ' | comparision operator | |
| + event.pageX + ' Y = ' + event.pageY); | x and y coordinate , we will get | |
| } | ||
| else if (event.type == 'mouseover') { | above funciton check | |
| $(this).addClass('ButtonStyle'); | it will come to else if , means and- if this event type is mouse over- it will add classs | |
| } | ||
| else { | ||
| $(this).removeClass('ButtonStyle'); | it w ill remove class if event type is not mouse over | |
| } | ||
| }); | ||
| $('#btnEnableMouseOverEffect').click(function () { | ||
| $('#btnClickMe').on('mouseover', function () { | if | |
| $(this).addClass('ButtonStyle'); | ||
| }); | ||
| }); | ||
| $('#btnDisableMouseOverEffect').click(function () { | ||
| $('#btnClickMe').off('mouseover'); | It will remove mosue over clas | |
| }); | ||
| }); | ||
| </script> | ||
| </head> | ||
| <body style="font-family:Arial"> | ||
| <input id="btnClickMe" type="button" value="Click Me" /> | ||
| <input id="btnEnableMouseOverEffect" type="button" | ||
| value="Enable Mouse Over Effect" /> | ||
| <input id="btnDisableMouseOverEffect" type="button" | ||
| value="Disable Mouse Over Effect" /> | ||
| <br /><br /> | ||
| <div id="divResult"></div> | ||
| </body> | ||
| </html> | ||
Monday, 8 June 2020
how to get the cooridnates using on and off methods
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment