为什么tippyjs光标指针和单击不能按预期工作

Question

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

​

​

onShow()).问题： click不适用于上面的(image) list item，对于styling，我必须得到refrence并做styling(E 114难)，请参阅E 215

备注： click on ...查看工具提示

codepen: 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.target是body，而不是ul或li。来自https://developer.mozilla.org/en-US/docs/Web/CSS/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;
}