javascript - 为什么tippyjs光标指针和点击没有按预期工作

Question

我正在使用tippyjs https://atomiks.github.io/tippyjs/插件作为用户列表工具提示

问题： click不适用于上述（图片）list item，因为styling我必须得到refrence并做styling（困难，请参阅onShow()）。

注意： click打开...查看工具提示

代码笔： https ://codepen.io/anon/pen/eQrwQM ?editors=0110#0

$.ajax({url:"https://jsonplaceholder.typicode.com/users",
            success:function(json){
          var logoutpage = '<ul class="all-users-content">';
          json.forEach((obj) => { logoutpage += '<li>'+obj.name+'</li>';});
          logoutpage += '</ul>';

          // actual tippy.js code

              tippy('.logout-top-corner', {
                  content: logoutpage,
                  delay: 100,
                  arrow: true,
                  arrowType: 'round',
                  size: 'large',
                  duration: 500,
                  animation: 'scale',
                  trigger:'click',
                  allowHTML:true,
                  hideOnClick:true,
                  // zIndex:9999999,
                  onShow:function(){
                      var refrence = document.querySelector('.logout-top-corner');
                      var tip = refrence._tippy;
                      var id = tip.id;
                     setTimeout(function(){
                         $('#tippy-'+id +' .tippy-tooltip.dark-theme').css({background:'#fff',border:'1px solid #ccc'});
                         $('#tippy-'+id +' .tippy-roundarrow').css({fill:'#eaeaed'});
                     },200);
                  },
                  onShown:function(){
                    console.log($(this));
                $(document).off('click','.all-users-content li');
                    $(document).on('click','.all-users-content li',function(){
                         alert('clicked');
                    });
                  }
               });
            }
        });

请帮助我提前谢谢！！！！！！！

Answer 1

在调查了事件和tippyjs库后，我发现它pointer-events: none被添加到了工具提示元素中，它似乎阻止了定位元素，所以event.targetisbody但不是ulor li。来自https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

pointer-events CSS 属性设置特定图形元素在什么情况下（如果有）可以成为鼠标事件的目标。

通过设置pointer-events: initial警报重置此属性会显示。这是完整的代码：

$.ajax({
    url: "https://jsonplaceholder.typicode.com/users",
    success: function(json) {
        var logoutpage = '<ul class="all-users-content">';
        json.forEach((obj) => {
            logoutpage += '<li>' + obj.name + '</li>';
        });
        logoutpage += '</ul>';

        // actual tippy.js code

        tippy('.logout-top-corner', {
            content: logoutpage,
            delay: 100,
            arrow: true,
            arrowType: 'round',
            size: 'large',
            duration: 500,
            animation: 'scale',
            trigger: 'click',
            allowHTML: true,
            hideOnClick: true,
            // zIndex:9999999,
            onShow: function() {
                var refrence = document.querySelector('.logout-top-corner');
                var tip = refrence._tippy;
                var id = tip.id;
                setTimeout(function() {
                    $('#tippy-' + id + ' .tippy-tooltip.dark-theme').css({
                        background: '#fff',
                        border: '1px solid #ccc'
                    });
                    $('#tippy-' + id + ' .tippy-roundarrow').css({
                        fill: '#eaeaed'
                    });
                }, 200);
            },
            onShown: function() {
                console.log($(this));
                var refrence = document.querySelector('.logout-top-corner');
                var tip = refrence._tippy;
                var id = tip.id;
                var el = document.getElementById('tippy-' + id);
                el.style.cssText += 'pointer-events: initial';
                $(document).off('click', '.all-users-content li');
                $(document).on('click', '.all-users-content li', function() {
                    alert('clicked');
                });
            }
        });
    }
});

如果要删除所有tippy元素的指针事件，可以添加css代码：

*[id^='tippy-']{
    pointer-events: initial;
}