Question

我想在我的网页上自定义文本选择菜单，在桌面浏览器中，它的工作原理类似于以下屏幕截图：

但是自定义菜单在移动设备上不可见，而是始终显示系统菜单，如以下屏幕截图所示：

Answer 1

您必须处理touchstart和touchend事件，但是您不能preventDefault()在触摸屏设备上使用上下文菜单，因此您可以显示带有偏移量的工具提示以同时显示这两个内容，并且不要忘记在工具提示按钮上添加touch事件处理程序，而不是click：

if (!window.x) {
    x = {};
}

x.Selector = {};
x.Selector.getSelected = function() {
    var t = '';
    if (window.getSelection) {
        t = window.getSelection();
    } else if (document.getSelection) {
        t = document.getSelection();
    } else if (document.selection) {
        t = document.selection.createRange().text;
    }
    return t;
}

var pageX;
var pageY;

$(document).ready(function() {
		
    function mouseUpHandler() {
        var selectedText = x.Selector.getSelected();
        if(selectedText != ''){
            $('ul.tools').css({
                'left': pageX + 5,
                'top' : pageY - 55
            }).fadeIn(200);
        } else {
            $('ul.tools').fadeOut(200);
        }
    }
    
    $(document).bind("mouseup", );
    $(document).on("mousedown", function(e){
        pageX = e.pageX;
        pageY = e.pageY;
    });

    let lis = [...document.querySelectorAll('li')];
    lis.map( li => li.addEventListener('touchstart', e=>console.log(e.target.innerHTML), false) ); 
    
    document.addEventListener('touchend', e => {
      clearTimeout(pressTimer);
    }, { passive: false });
    document.addEventListener('touchstart', e => {
      pressTimer = window.setTimeout(()=>{
      	pageX = e.changedTouches[0].pageX;
        pageY = e.changedTouches[0].pageY + 80; // 80px offset
        mouseUpHandler();
      }, 800);
    }, { passive: true });
});

body {
    padding: 60px 10px;
}

ul.tools {
    display: none;
    list-style: none;
    box-shadow: 0px 0px 4px rgba(0,0,0,.5);
    border: solid 1px #000;
    position: absolute;
    background: #fff;
}
ul.tools li {
    display: inline-block;
    width: 10px;
    height: 20px;
    border: solid 1px #000;
    margin: 5px;
    padding: 5px 10px;
    cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Vestibulum vel orci hendrerit ligula pharetra volutpat et sed dui. Phasellus vitae feugiat dolor. Mauris eleifend neque ac iaculis aliquet. Nunc malesuada nisi in dictum tristique. Vestibulum mauris eros, varius sed faucibus sed, pellentesque et nunc. Curabitur ultricies blandit urna. Pellentesque ut augue mollis, lacinia dui non, rutrum justo. Nunc et odio dapibus, blandit leo eget, aliquet urna. Etiam lorem dolor, vehicula a purus in, fermentum congue diam. Integer vel urna nec turpis posuere tempor eu lacinia purus. Praesent mattis viverra lacus bibendum fringilla. Nulla commodo posuere ante, at cursus est rhoncus quis. In iaculis viverra neque in blandit. Pellentesque eleifend arcu diam, sed sodales ligula pharetra at. Morbi ac nisl adipiscing sem interdum convallis. </p>

<ul class="tools">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

移动浏览器上的自定义文本选择菜单

1 个答案: