Для тех из вас, кто разрабатывает обычные веб-сайты или PWA (прогрессивные веб-приложения) для мобильных устройств и / или ноутбуков / мониторов с сенсорными экранами, вы приземлились здесь, потому что вы можете использовать события мыши и новы к иногда болезненным опыт сенсорных событий ... yay!
Есть только 3 правила:
mousemove
или touchmove
. mousedown
или touchstart
. Излишне говорить, что события touch
сложнее, потому что их может быть несколько, и они более гибкие (сложные), чем события мыши. Я только собираюсь прикрыть здесь одно касание. Да, я ленив, но это самый распространенный тип прикосновения, поэтому там.
var posTop;
var posLeft;
function handleMouseDown(evt) {
var e = evt || window.event; // Because Firefox, etc.
posTop = e.target.offsetTop;
posLeft = e.target.offsetLeft;
e.target.style.background = "red";
// The statement above would be better handled by CSS
// but it's just an example of a generic visible indicator.
}
function handleMouseMove(evt) {
var e = evt || window.event;
var x = e.offsetX; // Wonderfully
var y = e.offsetY; // Simple!
e.target.innerHTML = "Mouse: " + x + ", " + y;
if (posTop)
e.target.innerHTML += "
" + (x + posLeft) + ", " + (y + posTop);
}
function handleMouseOut(evt) {
var e = evt || window.event;
e.target.innerHTML = "";
}
function handleMouseUp(evt) {
var e = evt || window.event;
e.target.style.background = "yellow";
}
function handleTouchStart(evt) {
var e = evt || window.event;
var rect = e.target.getBoundingClientRect();
posTop = rect.top;
posLeft = rect.left;
e.target.style.background = "green";
e.preventDefault(); // Unnecessary if using Vue.js
e.stopPropagation(); // Same deal here
}
function handleTouchMove(evt) {
var e = evt || window.event;
var pageX = e.touches[0].clientX; // Touches are page-relative
var pageY = e.touches[0].clientY; // not target-relative
var x = pageX - posLeft;
var y = pageY - posTop;
e.target.innerHTML = "Touch: " + x + ", " + y;
e.target.innerHTML += "
" + pageX + ", " + pageY;
e.preventDefault();
e.stopPropagation();
}
function handleTouchEnd(evt) {
var e = evt || window.event;
e.target.style.background = "yellow";
// Yes, I'm being lazy and doing the same as mouseout here
// but obviously you could do something different if needed.
e.preventDefault();
e.stopPropagation();
}
div {
background: yellow;
height: 100px;
left: 50px;
position: absolute;
top: 80px;
user-select: none; /* Disable text selection */
-ms-user-select: none;
width: 100px;
}
Move over box for coordinates relative to top left of box.
Hold mouse down or touch to change color.
Drag to turn on coordinates relative to top left of page.
Предпочитаете использовать Vue.js ? Я делаю! Тогда ваш HTML будет выглядеть так:
484
задан john.k.doe 11 October 2014 в 17:51
поделиться
На самом деле, ответ на этот вопрос довольно прост.
В проекте Xcode найдите файлы, которые вызывают предупреждение, и просто удалите один из них.
Xcode покажет только одну ссылку на этот файл в результатах поиска, но не останавливайтесь на достигнутом, продолжайте и удалите его. (перед его удалением лучше сделать резервную копию файла проекта)
Теперь постройте проект заново. Теперь предупреждение должно исчезнуть. (этот ответ для предыдущей версии xcode)