Skip to content
On this page

Intersection

捕获目标元素的曝光事件,主要原理是创建 IntersectionObserver 实例

WARNING

监听阈值(threshold)解释:阀值默认为0.5,当为0.5时代表滚动超过图片达到一半时即为曝光结束 同理当为0.5时,代表滚动视图能看到图片一半时即为曝光开始

触发事件时给后台的对象

属性名称说明
eventTypeintersection事件类型
target被监听的元素(无效参数)
threshold监听阈值
params附加参数
observeTime开始监听时间
showTime元素开始被曝光的时间
showEndTime元素结束被曝光的时间
sendTime发送时间
triggerPageUrl页面地址
js
// 真实场景产生的事件对象
{
  eventType: 'intersection',
  target: { _prevClass: 'mb' },
  threshold: 0.5,
  observeTime: 1689734412090,
  params: { name: 1111, targetName: 'target' },
  showTime: 1689734412098,
  showEndTime: 1689734414097,
  sendTime: 1689734415104
  triggerPageUrl: 'http://localhost:6656/#/intersection',
}

使用说明

sdk初始化时不提供此功能,只能在页面针对某个元素进行监听

js
import {
  intersectionObserver,
  intersectionUnobserve,
  intersectionDisconnect
} from '@web-tracing/vue2'

const target = document.querySelector(`#xxx`)

// 对元素开始监听
intersectionObserver({
  target,
  threshold: 0.5, // 曝光的临界点 (0.5表示移入窗口一半算做开始曝光、移出窗口一半算结束曝光)
  params: { name: 1111, targetName: str } // 附带的额外参数
})

// 对元素结束监听
intersectionUnobserve(target)

// 结束所有的元素监听
intersectionDisconnect()