Recently i have been working with Dashing which is a great tool to displaying information as a dashboard. I would like to show the dashboard on a big TV. Everything works fine on my Mac but when it is shown on the TV screen, the onclick event is not triggered.
I need to check which event is triggered when i press on the TV screen. The web developer console in Chrome of Firebug in Firefox could help you to determine which event is triggered. For example, the menu bar of Eureka! has the following HTML structure.
<div class="nav-menu">
<ul>
<li class="page_item page-item-1630"><a href="https://eureka.ykyuen.info/about-eureka/">About</a></li>
<li class="page_item page-item-8284"><a href="https://eureka.ykyuen.info/portfolio/">Portfolio</a></li>
<li class="page_item page-item-731"><a href="https://eureka.ykyuen.info/faz-jewelry/">Faz Jewelry</a></li>
<li class="page_item page-item-6494"><a href="https://eureka.ykyuen.info/linux-commands/">Linux Commands</a></li>
<li class="page_item page-item-8388"><a href="https://eureka.ykyuen.info/reads/">Reads</a></li>
<li class="page_item page-item-7349"><a href="https://eureka.ykyuen.info/syntax-highlight/">Syntax Highlight</a></li>
<li class="page_item page-item-9773"><a href="https://eureka.ykyuen.info/%e6%97%85%e8%a1%8c%e8%a8%98/">旅行記</a></li>
</ul>
</div>
I would like to monitor all the events which are triggered by the first li.page_item element. This can be done by inputing the following command in the console.
monitorEvents(document.getElementsByClassName("page_item")[0])
Then you can move your mouse pointer to the first menu item and all the events being triggered are outputted to the console.
You can also filter out those events which you don’t care. Ex:
// Monitor mouseover and mouseout only
monitorEvents(document.getElementsByClassName("page_item")[0], ["mouseover", "mouseout"])
Finally, it is found that the triggered events on the TV are ontouchstart, ontouchmove and ontouchend.
Done =)
Reference: Firebug Wiki – MonitorEvents
Eureka! 