Question

Facebook显示＆＃34;喜欢＆＃34;在帖子上（＆＃34; x像这样的人＆＃34;）通过一个锚点，其工具提示内容在悬停时动态加载。例如，这个公开的Facebook post有一个＆＃34; 1,453人＆＃34; [like this] 锚定义为：

<a data-testid="n_other_people_link" 
   class="UFINoWrap" 
   rel="dialog"
   ajaxify="/ajax/browser/dialog/likes?actorid=104958162837&amp;id=10152950941352838" 
   href="/browse/likes?actorid=104958162837&amp;id=10152950941352838" 
   data-hover="tooltip" 
   data-tooltip-alignh="center" 
   data-tooltip-uri="/ajax/like/tooltip.php?comment_fbid=10152950941352838&amp;comment_from=643726632&amp;seen_user_fbids=true&amp;av=643726632"
   role="button" 
   data-reactid=".2.1:1.0.$right.0.0.0.$range0/=10">
   1,453 people
</a>

在悬停时，此锚点会获取一个aria-label属性，其中包含喜欢该帖子的人员的姓名。通过AJAX从Facebook异步检索内容。

<a data-testid="n_other_people_link" 
   class="UFINoWrap" 
   rel="dialog" 
   ajaxify="/ajax/browser/dialog/likes?actorid=104958162837&amp;id=10152950941352838" 
   href="/browse/likes?actorid=104958162837&amp;id=10152950941352838" 
   data-hover="tooltip" 
   data-tooltip-alignh="center" 
   role="button" 
   data-reactid=".2.1:1.0.$right.0.0.0.$range0/=10" 
   aria-label="(Name 1)
      (Name 2)
      (...)
      and 1,434 more..." 
   id="js_9">
   1,453 people
</a>

有没有办法模拟这种行为 - 即通过JavaScript或jQuery填充aria-label属性？我使用了浏览器的开发者工具（Firefox或Chrome）的控制台功能。我可以通过调用aria-label事件来填充click，但这也会导致启动对话框;我只需要＆＃34; hover＆＃34;行为。

Answer 1

当用户将鼠标移动到元素顶部时触发的事件是鼠标悬停＆＃39;。使用jQuery，您可以通过编程以编程方式在元素上启动此行为。

$(selector).trigger('mouseover');

Answer 2

我发现trigger('mouseover')对于此操作不可靠，在大约一半页面上无声地失败。

this answer中提出的dispatchEvent方法似乎更加一致：

var evObj = document.createEvent( 'Events' );
evObj.initEvent( 'mouseover', true, false );
$('a[data-hover="tooltip"]:not([aria-label])').each(function (i, a) { 
    a.dispatchEvent( evObj ); 
});

扩展版本，为控制台引入时间延迟和状态更新：

var evObj = document.createEvent( 'Events' );
evObj.initEvent( 'mouseover', true, false );
var toHover = $('a[data-hover="tooltip"]:not([aria-label])');

toHover.each(function (i, a) {
    setTimeout( function() { 
        var info = $(a).attr('data-tooltip-uri');
        console.log('Loading ' + (i + 1) + ' of ' + toHover.length + ': ' + info);
        a.dispatchEvent( evObj );
    }, i * 100);
});

调用data-hover =＆＃34;工具提示＆＃34;使用JavaScript的行为

2 个答案: