# HTML5 标签

目前支持的 HTML5 标签列表

# <div>

通用的div标签，具体参数参考CSS样式列表。

海报场景建议使用 JsvPosterDiv，可含有海报加载完成瞬间的淡入效果，以及加载完成前的显示自定义的默认背景，加载完成后默认背景消失的功能

# <img>

通用的img标签，具体参数参考CSS样式列表，和div相比，多一个onload回调来用来了解图片加载的时机

onload的写法样例:

<img :src="xxxxxx"  @load="xxxFunction"/>

海报场景建议使用 JsvPosterImage，除了具有JsvPosterDiv的功能外，还能控制图片进行按显示尺寸压缩来节省内存，

# <audio>

JsView的长音频播放请使用JsvAudio插件，按键音等短音频使用 JsvSoundPool 组件，参考样例为: 游戏实例->SoundPool

其中JsvAudio的参数是参考H5标准，但没有timeupdated回调，如果想进行进度控制等操作，请转用商用插件 JsvPlayer

H5参照: HTML5 audio 标准 (opens new window)

Media标签和插件的关系。

# <video>

考虑到盒子播放器的独特性，JsView不提供直接的video标签，视频/音频播放都通过插件实现，例如商用插件 JsvPlayer

Media标签和插件的关系。

# 其他

# Element的jsv扩展方法

<div>标签或者<img>标签，通过vue的ref方法拿到其句柄后，可以调用如下扩展方法

jsvGetBoundingClientRect

对应场景为: 想拿取<div>或者<img>元素的位置信息, 为焦点框全局移动提供坐标参考的场景。
异步获取元素的绝对坐标, 返回Promise. then回调参数: { left: number, top: number, width: number, height: number }
jsvSetTapListener

对应场景: 想为<div>或者<img>元素添加除了@click外, 更加详细的触控响应接口时。
注册触控单指的响应处理，其参数为 { listeners: Object }
此listener Object的格式为:

{
  // onClick(touchCount:number), 响应点击事件的回调函数，可为null或者不写
  onClick, 

  // onLongPress(touchCount:number), 长按处理的回调，可为null或者不写，
  // 长按转drag时会变成onCancel状态，若长按后正常离开，则为onLongPressRelease状态
  onLongPress,

  // onLongPressRelease(touchCount:number), 长按动作正常结束的事件回调，
  // 可为null或者不写
  onLongPressRelease, 

  // onCancel(touchCount:number), 手指在LongPress状态下开始进行大幅度移动，
  // 退出长按状态时，可为null或者不写
  onCancel, 

  // onTouchStart(touchCount:number), 第一个手指按下时的回调，可为null或者不写
  onTouchStart,

  // onTouchEnd(touchCount:number), 最后一个手指离开时的回调，可为null或者不写
  onTouchEnd,
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

注意: 当此功能启动时，本element若同时存在@click回调，则不再响应(功能被jsvSetTapListener替代)

jsvConsumeMouseEvent

对应场景: 需要禁用当前 <div> 或 <img> 元素上部分鼠标事件响应（例如阻止 hover、滚轮 scroll 等在该元素上生效），特别是当做蒙层div的场景, 可以将此蒙层挡住的所有元素(包括metroWidget)的鼠标事件都挡住。
禁用当前 Element 的鼠标事件，通过 settings 参数（MouseEventFlags 类型）指定要禁用哪些鼠标事件
settings 的格式为:

{
  // hover: true 表示禁用 hover 相关响应
  hover: true,

  // scroll: true 表示禁用 scroll 相关响应
  scroll: true,
}

1
2
3
4
5
6
7

注意: settings 中对应字段设为 true 会禁用该类型的鼠标事件响应；例如 { hover: true, scroll: true } 会禁用 hover 和 scroll 事件

← 简介 CSS3 样式表 →