Categorize articles under HTML5

Update records

03/17 00:12: Right click the menu bar to appear at the top after solving the scrolling page. The solution will e.clientY change into e.pageY

Online preview: https://nowtime.cc/mdui/contextmenu.html

Core JavaScript code:

 var $$ = mdui. JQ; //Listen to the right click event/mobile terminal long press event $$(document).on('contextmenu', function (e) { // console.log(e); //0: Long press on mobile terminal (iOS test failed) //2: Right click on the computer side if(e.button === 2 || e.button === 0) { e.preventDefault();// Prevent bubbles and the default browser menu //(Modified here) The mouse click position is relative to the page var _x = e.pageX, _y = e.pageY; let $div = $$("<div></div>").css({ position: 'absolute', top: _y+'px', left: _x+'px', }); $$('body').append($div);// Create temporary DOM //The anchorSelector represents the CSS selector or DOM element of the element that triggers the menu //MenuSelector represents the CSS selector or DOM element of the menu //Options indicates the configuration parameters of the component. See the following parameter list //Full document list: https://doc.nowtime.cc/mdui/menu.html var inst = new mdui. Menu($div, '#menu'); inst.open();// Open Menu Bar $div.remove();// Destroy the temporary DOM created } });

Full HTML code

-Read the rest-