分类 HTML5 下的文章
注册账号时,密码表单使浏览器提示建议的密码(现代主流浏览器 Chrome、Safari、Firefox 支持)
记录一次 box-shadow 和 border-radius 搭配遇到的一些小问题
MDUI 实现右击菜单弹出菜单栏
更新记录
03/17 00:12:解决滚动页面后右击菜单栏出现在顶部。解决办法将
e.clientY
换成e.pageY
在线预览:https://nowtime.cc/mdui/contextmenu.html
核心 JavaScript 代码:
var $$ = mdui.JQ;
//监听鼠标右击事件 / 移动端长按事件
$$(document).on('contextmenu', function (e) {
// console.log(e);
//0:移动端长按(iOS 测试未通过)
//2:电脑端右键
if(e.button === 2 || e.button === 0) {
e.preventDefault();//阻止冒泡,阻止默认的浏览器菜单
//(修改了这里)鼠标点击位置,相对于页面
var _x = e.pageX,
_y = e.pageY;
let $div = $$("<div></div>").css({
position: 'absolute',
top: _y+'px',
left: _x+'px',
});
$$('body').append($div);//创建临时DOM
// anchorSelector 表示触发菜单的元素的 CSS 选择器或 DOM 元素
// menuSelector 表示菜单的 CSS 选择器或 DOM 元素
// options 表示组件的配置参数,见下面的参数列表
// 完整文档列表:https://doc.nowtime.cc/mdui/menu.html
var inst = new mdui.Menu($div, '#menu');
inst.open();//打开菜单栏
$div.remove();//销毁创建的临时DOM
}
});