以下用jQuery和 原生监听fullscreenchange事件,为什么elvideo视频在jQuery中没暂停,在原生中暂停 const elvideo = $(`${data_taskId} video`)[0] $(document) .off('fullscreenchange') .on('fullscreenchange', () => { if (!checkIsFullScreen()) { console.log('退出全屏') console.log(elvideo) elvideo.pause() $(`${data_taskId} video`).attr({ controls: false }) $(`${data_taskId} .play`).show() $(`${data_taskId} span`).show() } }) document.addEventListener('fullscreenchange', () => { if (!checkIsFullScreen()) { console.log('退出全屏') console.log(elvideo) elvideo.pause() $(`${data_taskId} video`).attr({ controls: false }) $(`${data_taskId} .play`).show() $(`${data_taskId} span`).show() } })
时间: 2024-02-14 07:31:16 浏览: 108
在jQuery中,`elvideo` 是一个 jQuery 对象,通过索引 `[0]` 可以获取到原生的 DOM 元素。所以在 `elvideo.pause()` 的调用中是有效的。
而在原生监听中,`elvideo` 是直接通过原生 DOM 方法获取的,不是 jQuery 对象。所以在 `elvideo.pause()` 的调用中是有效的。
可能的原因是在 jQuery 中,`elvideo` 是一个 jQuery 对象,调用 `pause()` 方法时会被 jQuery 内部处理并转发给原生 DOM 元素,所以视频会暂停。而在原生监听中,`elvideo` 是直接的 DOM 元素,所以可以直接调用 `pause()` 方法。
如果你希望在 jQuery 中也能暂停视频,可以尝试使用 `elvideo.get(0).pause()` 来调用原生的 `pause()` 方法。这样可以确保在 jQuery 中也能正确暂停视频。
相关问题
原生textarea拖拽滚动条不动
原生的`<textarea>`元素通常不允许直接通过鼠标拖动滚动条进行滚动,这是出于安全性和用户体验的考虑,防止用户意外触发滚动操作。如果你希望实现类似的功能,可以考虑使用JavaScript库,如jQuery、Vue.js或自定义事件处理程序。
一种常见的做法是在textarea外部添加一个可拖动的div,并监听鼠标的滚动事件。当用户拖动这个div时,通过计算偏移量同步调整textarea的内容区域的scrollTop属性,从而达到模拟滚动的效果。这里的关键点在于计算偏移并更新DOM。
下面是一个简单的例子(仅提供伪代码,你需要结合实际框架进行编码):
```javascript
// 获取textarea和模拟滚动条的div
const textarea = document.getElementById('myTextarea');
const scrollArea = document.getElementById('scrollWrapper');
// 鼠标按下事件
scrollArea.addEventListener('mousedown', function(e) {
// 记录初始位置和开始滚动的距离
const initialPos = e.clientY;
});
// 鼠标移动事件
scrollArea.addEventListener('mousemove', function(e) {
// 更新滚动条位置
const newPos = e.clientY - initialPos;
textarea.scrollTop += newPos;
});
// 鼠标抬起事件
scrollArea.addEventListener('mouseup', function() {
// 取消事件绑定
scrollArea.removeEventListener('mousedown', handleMouseDown);
scrollArea.removeEventListener('mousemove', handleMouseMove);
});
```
原生html实现类似vue的{{}}
原生HTML中并没有直接提供类似于Vue.js中的`{{ }}`模板语法,用于数据绑定。然而,可以借助JavaScript和一些现代浏览器支持的特性来实现类似的功能。比如:
1. **JavaScript**:你可以通过JavaScript的`textContent`属性动态更新元素内容,如:
```javascript
let element = document.getElementById('my-element');
element.textContent = yourData;
```
2. **DOM操作**: 可以通过获取元素并设置其innerText或innerHTML来间接实现:
```javascript
const myElement = document.querySelector('#my-element');
myElement.innerText = '数据值';
```
3. **事件监听**:当数据变化时,可以通过添加事件监听器实时更新元素:
```javascript
let data = 0;
const updateElement = () => {
document.getElementById('my-element').textContent = data;
};
data += 1; // 模拟数据变化
updateElement();
```
请注意,以上方法需要手动触发更新,并不具备Vue那样的双向数据绑定能力。如果需要完整的双向数据绑定,还是建议使用像React、Vue这样的前端框架,或者使用库如jQuery、Angular等。
阅读全文