این آموزش در تاریخ ۱۳۹۸/۰۱/۰۶ آپدیت شده است.
آموزش رویداد عمومی OnMouseDown در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش رویداد عمومی OnMouseDown در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
رویداد عمومی onmousedown در HTML
رویداد onmousedown همانطور که از اسمش هم مشخصه زمانی رخ میدهد که یکی از کلیک های ماوس فشار داده شود، ینی در واقع تا زمانی که کلیک فشار داده شده و نگه داشته شده باشد این رویداد عمل میکند.
برای مثال لطفا بروی دکمه زیر کلیک نمایید و کلیک را نگه دارید و نتیجه را خودتان ببینید :
Free-Learn
مثال از رویداد عمومی onmousedown در HTML
در ادامه میتوانید یک مثال از این رویداد را مشاهده نمایید.
در این مثال هم از رویداد onmousedown و هم onmouseup استفاده شده است.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<body> <p dir="rtl" id="p1" onmousedown="mouseDown()" onmouseup="mouseUp()"> لطفا روی من کلیک کن و کلیک رو نگه دار بعدش رها کن </p> <script> function mouseDown() { document.getElementById("p1").style.color = "#fff"; document.getElementById("p1").style.background = "#2196F3"; } function mouseUp() { document.getElementById("p1").style.color = "#fff"; document.getElementById("p1").style.background = "#F44336"; } </script> </body> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از رویداد onmousedown در HTML پشتیبانی میکنند یا خیر.
| نام مرورگر | Chrome | Firefox | Opera | Safari | IE |
| پشتیبانی | بله | بله | بله | بله | بله |
Free-Learn
روش استفاده
روش استفاده از این رویداد در عناصر HTML بصورت زیر می باشد.
|
1 |
<element onmousedown="script"> |
Free-Learn
جدول مقادیر رویداد onmousedown
در جدول زیر میتوانید مقادیری را که میتوان در این رویداد استفاده کرد را مشاهده نمایید.
| مقدار | توضیح |
| script | دستورات جاوااسکریپت برای اجرا شدن |
Free-Learn
عناصری که توسط این رویداد پشتیبانی می شوند
رویداد onmousedown را میتوان در تمامی عناصر/تگ های HTML بکار برد.
ولی در تگ های زیر نمیتوان این رویداد را بکار برد :
| <base> | <bdo> | <br> | <head> |
| <html> | <iframe> | <meta> | <param> |
| <script> | <style> | <title> | – |
