不能在手机上的“范围按钮”上使用onmousemove，有啥可以用相同的功能代替它吗？
Posted
技术标签:
【中文标题】不能在手机上的“范围按钮”上使用onmousemove，有啥可以用相同的功能代替它吗？【英文标题】：can't use onmousemove on 'range button' on mobile phone, anything to replace it with the same function?不能在手机上的“范围按钮”上使用onmousemove，有什么可以用相同的功能代替它吗？ 【发布时间】：2021-10-10 22:26:36 【问题描述】：我正在使用 'onmousemove=incfont()' 将按钮连接到下面的 javascript：
<html>
<div class="wrapper-fontsize">
<div class="fontChanger">
<span></span>
<span>
8
<input type="range" onmousemove="incfont();" id="fontsize" min="8" max="36" value="16" style="width: 80%;" />
36
</span>
<label style="display: block !important;">
Font Size :
<span id="size">16</span>
</label>
</div>
</div>
</html>
<script>
// ====== Font Resizer ======
var size;
var save = localStorage.getItem('fontChange', size);
if (localStorage.getItem('fontChange'))
var x = document.getElementById('novel-content');
x.style.fontSize = save + "px";
document.getElementById('size').innerHTML = save;
document.getElementById('fontsize').value = save;
function incfont()
var t = document.getElementById('fontsize').value;
var x = document.getElementById('novel-content');
x.style.fontSize = t + "px";
size = t;
document.getElementById('size').innerHTML = size;
localStorage.setItem('fontChange', size);
// ====== Open-Close The Tool ======
const closeFontChange = document.querySelector(".wrapper-fontsize");
function openFontChanger()
closeFontChange.classList.add("active");
closeFontChange.addEventListener("click", function ()
closeFontChange.classList.remove("active");
);
</script>
然后：
-
我在桌面上试了一下，拖动时文本可以正确更改其字体大小。
然后我在手机上的chrome上试了一下。然后有一个错误，无论我对范围按钮做什么，字体大小都不想改变（按照 javascript）
起初我认为这完全是因为我的手机版本（6.0 marshmallow）所以我使用 chrome 'inspect element' 通过设备视线（ctrl + shift + M）运行网络。然后第二个问题就发生了。
问题不在于本地存储。幸运的是，本地存储在台式机或移动设备上都能很好地工作。本地存储可以保存变量号并用它启动函数。
到目前为止，我假设手机无法接受“onmausemove”功能。那么如果是真的，有什么东西可以用同样的功能代替吗？
【问题讨论】：
问题太多了。似乎所有问题都可以清楚地回答，但我希望您可以一问一答。 【参考方案1】：一切都很简单，但也许我必须改变它的结构。由于我不能使用“onmausemove”，所以只需使用另一种方式，如 onclick，但功能相同。这里：
let ids = ["#content"];
// ====== Font Change ======
function changeFontSize(type)
ids.forEach(id =>
let el = document.querySelector(id);
let fontSize = window.getComputedStyle(el, null).getPropertyValue("font-size");
fontSize = parseFloat(fontSize);
if(type === "increase" & fontSize < 24)
el.style.fontSize = (fontSize + 2) + "px";
else if (type === "decrease" & fontSize > 12)
el.style.fontSize = (fontSize - 2) + "px";
var rest = window.getComputedStyle(el, null).getPropertyValue("font-size");
var size = rest.replace('px', '');
document.getElementById('size').innerHTML = size;
)
body
background: #d8d8d8;
.wrapper
background: #fff;
padding: 4px 16px;
border-radius: 10px;
display: flex;
flex-direction: column;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
margin-bottom: 8px;
.wrapper p, .wrapper h1
color: #000;
text-align: justify;
line-height: 2;
font-family: 'Georgia', sans-serif;
margin: 0;
margin-bottom: 0.8em;
.wrapper p
font-size: inherit;
.wrapper h1
font-size: 28px;
button
background: transparent;
padding: 4px 20px;
display: inline-block;
font-size: 16px;
cursor: pointer;
border: none;
border: 1px solid #000;
transition: all .3s ease;
user-select: none;
cursor: pointer;
button:hover
background: #1f1d34;
color: #fff;
<div class="post-wrapper" style="filter: brightness(100%);">
<div class="wrapper" id="content">
<h1>Lorem ipsum</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis accusamus debitis possimus magni, ab explicabo laboriosam nesciunt quisquam expedita consequatur ut deserunt suscipit, voluptatibus, excepturi maiores quasi modi similique ad.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis accusamus debitis possimus magni, ab explicabo laboriosam nesciunt quisquam expedita consequatur ut deserunt suscipit, voluptatibus, excepturi maiores quasi modi similique ad.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis accusamus debitis possimus magni, ab explicabo laboriosam nesciunt quisquam expedita consequatur ut deserunt suscipit, voluptatibus, excepturi maiores quasi modi similique ad.
</p>
</div>
</div>
<div class="wrapper-fontsize">
<div class="fontChanger">
<h4>Font Size</h4>
<button onclick="changeFontSize('decrease')">A-</button>
<span id="size">16</span>
<button onclick="changeFontSize('increase')">A+</button>
</div>
</div>【讨论】：
以上是关于不能在手机上的“范围按钮”上使用onmousemove，有啥可以用相同的功能代替它吗？的主要内容，如果未能解决你的问题，请参考以下文章
我们如何从 ListView 中进行多选？我看到它可以在桌面上运行，但不能在手机上运行
求前端大神帮忙，vue项目，修改了index.js ,的host:'192.168.1.101 ',之后，不能在手机上预览，