Android系统下用js自定义gesture事件（仿ios实现移动端事件一致）

.katex { display: inline-block; text-align: initial; }
.katex { font-family: Consolas, Inconsolata, Courier, monospace; line-height: 1.2; white-space: nowrap; text-indent: 0px; text-rendering: auto; font-size: 1em; }
.katex * { }
.katex .katex-html { display: inline-block; }
.katex .katex-mathml { position: absolute; clip: rect(1px 1px 1px 1px); padding: 0px; border: 0px; height: 1px; width: 1px; overflow: hidden; }
.katex .base { position: relative; display: inline-block; }
.katex .strut { display: inline-block; }
.katex .mathrm { font-style: normal; }
.katex .textit { font-style: italic; }
.katex .mathit { font-style: italic; }
.katex .mathbf { font-weight: bold; }
.katex .amsrm { }
.katex .mathbb { }
.katex .mathcal { }
.katex .mathfrak { }
.katex .mathtt { }
.katex .mathscr { }
.katex .mathsf { }
.katex .mainit { font-style: italic; }
.katex .mainrm { font-style: normal; }
.katex .mord + .mop { margin-left: 0.16667em; }
.katex .mord + .mbin { margin-left: 0.22222em; }
.katex .mord + .mrel { margin-left: 0.27778em; }
.katex .mord + .minner { margin-left: 0.16667em; }
.katex .mop + .mord { margin-left: 0.16667em; }
.katex .mop + .mop { margin-left: 0.16667em; }
.katex .mop + .mrel { margin-left: 0.27778em; }
.katex .mop + .minner { margin-left: 0.16667em; }
.katex .mbin + .mord { margin-left: 0.22222em; }
.katex .mbin + .mop { margin-left: 0.22222em; }
.katex .mbin + .mopen { margin-left: 0.22222em; }
.katex .mbin + .minner { margin-left: 0.22222em; }
.katex .mrel + .mord { margin-left: 0.27778em; }
.katex .mrel + .mop { margin-left: 0.27778em; }
.katex .mrel + .mopen { margin-left: 0.27778em; }
.katex .mrel + .minner { margin-left: 0.27778em; }
.katex .mclose + .mop { margin-left: 0.16667em; }
.katex .mclose + .mbin { margin-left: 0.22222em; }
.katex .mclose + .mrel { margin-left: 0.27778em; }
.katex .mclose + .minner { margin-left: 0.16667em; }
.katex .mpunct + .mord { margin-left: 0.16667em; }
.katex .mpunct + .mop { margin-left: 0.16667em; }
.katex .mpunct + .mrel { margin-left: 0.16667em; }
.katex .mpunct + .mopen { margin-left: 0.16667em; }
.katex .mpunct + .mclose { margin-left: 0.16667em; }
.katex .mpunct + .mpunct { margin-left: 0.16667em; }
.katex .mpunct + .minner { margin-left: 0.16667em; }
.katex .minner + .mord { margin-left: 0.16667em; }
.katex .minner + .mop { margin-left: 0.16667em; }
.katex .minner + .mbin { margin-left: 0.22222em; }
.katex .minner + .mrel { margin-left: 0.27778em; }
.katex .minner + .mopen { margin-left: 0.16667em; }
.katex .minner + .mpunct { margin-left: 0.16667em; }
.katex .minner + .minner { margin-left: 0.16667em; }
.katex .mord.mtight { margin-left: 0px; }
.katex .mop.mtight { margin-left: 0px; }
.katex .mbin.mtight { margin-left: 0px; }
.katex .mrel.mtight { margin-left: 0px; }
.katex .mopen.mtight { margin-left: 0px; }
.katex .mclose.mtight { margin-left: 0px; }
.katex .mpunct.mtight { margin-left: 0px; }
.katex .minner.mtight { margin-left: 0px; }
.katex .mord + .mop.mtight { margin-left: 0.16667em; }
.katex .mop + .mord.mtight { margin-left: 0.16667em; }
.katex .mop + .mop.mtight { margin-left: 0.16667em; }
.katex .mclose + .mop.mtight { margin-left: 0.16667em; }
.katex .minner + .mop.mtight { margin-left: 0.16667em; }
.katex .vlist-t { display: inline-table; table-layout: fixed; }
.katex .vlist-r { display: table-row; }
.katex .vlist { display: table-cell; vertical-align: bottom; position: relative; }
.katex .vlist > span { display: block; height: 0px; position: relative; }
.katex .vlist > span > span { display: inline-block; }
.katex .vlist > span > .pstrut { overflow: hidden; width: 0px; }
.katex .vlist-t2 { margin-right: -2px; }
.katex .vlist-s { display: table-cell; vertical-align: bottom; font-size: 1px; width: 2px; }
.katex .msupsub { text-align: left; }
.katex .mfrac > span > span { text-align: center; }
.katex .mfrac .frac-line { display: inline-block; width: 100%; }
@media screen {
.katex .mfrac .frac-line, .katex .overline .overline-line, .katex .underline .underline-line { min-height: 1px; }
}
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi) {
.katex .mfrac .frac-line, .katex .overline .overline-line, .katex .underline .underline-line { min-height: 0.5px; }
}
.katex .mspace { display: inline-block; }
.katex .mspace.negativethinspace { margin-left: -0.16667em; }
.katex .mspace.thinspace { width: 0.16667em; }
.katex .mspace.negativemediumspace { margin-left: -0.22222em; }
.katex .mspace.mediumspace { width: 0.22222em; }
.katex .mspace.thickspace { width: 0.27778em; }
.katex .mspace.sixmuspace { width: 0.333333em; }
.katex .mspace.eightmuspace { width: 0.444444em; }
.katex .mspace.enspace { width: 0.5em; }
.katex .mspace.twelvemuspace { width: 0.666667em; }
.katex .mspace.quad { width: 1em; }
.katex .mspace.qquad { width: 2em; }
.katex .llap, .katex .rlap, .katex .clap { width: 0px; position: relative; }
.katex .llap > .inner, .katex .rlap > .inner, .katex .clap > .inner { position: absolute; }
.katex .llap > .fix, .katex .rlap > .fix, .katex .clap > .fix { display: inline-block; }
.katex .llap > .inner { right: 0px; }
.katex .rlap > .inner, .katex .clap > .inner { left: 0px; }
.katex .clap > .inner > span { margin-left: -50%; margin-right: 50%; }
.katex .katex-logo .a { font-size: 0.75em; margin-left: -0.32em; position: relative; top: -0.2em; }
.katex .katex-logo .t { margin-left: -0.23em; }
.katex .katex-logo .e { margin-left: -0.1667em; position: relative; top: 0.2155em; }
.katex .katex-logo .x { margin-left: -0.125em; }
.katex .rule { display: inline-block; border: 0px solid; position: relative; }
.katex .overline .overline-line, .katex .underline .underline-line { display: inline-block; width: 100%; }
.katex .sqrt > .root { margin-left: 0.277778em; margin-right: -0.555556em; }
.katex .sizing, .katex .fontsize-ensurer { display: inline-block; }
.katex .sizing.reset-size1.size1, .katex .fontsize-ensurer.reset-size1.size1 { font-size: 1em; }
.katex .sizing.reset-size1.size2, .katex .fontsize-ensurer.reset-size1.size2 { font-size: 1.2em; }
.katex .sizing.reset-size1.size3, .katex .fontsize-ensurer.reset-size1.size3 { font-size: 1.4em; }
.katex .sizing.reset-size1.size4, .katex .fontsize-ensurer.reset-size1.size4 { font-size: 1.6em; }
.katex .sizing.reset-size1.size5, .katex .fontsize-ensurer.reset-size1.size5 { font-size: 1.8em; }
.katex .sizing.reset-size1.size6, .katex .fontsize-ensurer.reset-size1.size6 { font-size: 2em; }
.katex .sizing.reset-size1.size7, .katex .fontsize-ensurer.reset-size1.size7 { font-size: 2.4em; }
.katex .sizing.reset-size1.size8, .katex .fontsize-ensurer.reset-size1.size8 { font-size: 2.88em; }
.katex .sizing.reset-size1.size9, .katex .fontsize-ensurer.reset-size1.size9 { font-size: 3.456em; }
.katex .sizing.reset-size1.size10, .katex .fontsize-ensurer.reset-size1.size10 { font-size: 4.148em; }
.katex .sizing.reset-size1.size11, .katex .fontsize-ensurer.reset-size1.size11 { font-size: 4.976em; }
.katex .sizing.reset-size2.size1, .katex .fontsize-ensurer.reset-size2.size1 { font-size: 0.833333em; }
.katex .sizing.reset-size2.size2, .katex .fontsize-ensurer.reset-size2.size2 { font-size: 1em; }
.katex .sizing.reset-size2.size3, .katex .fontsize-ensurer.reset-size2.size3 { font-size: 1.16667em; }
.katex .sizing.reset-size2.size4, .katex .fontsize-ensurer.reset-size2.size4 { font-size: 1.33333em; }
.katex .sizing.reset-size2.size5, .katex .fontsize-ensurer.reset-size2.size5 { font-size: 1.5em; }
.katex .sizing.reset-size2.size6, .katex .fontsize-ensurer.reset-size2.size6 { font-size: 1.66667em; }
.katex .sizing.reset-size2.size7, .katex .fontsize-ensurer.reset-size2.size7 { font-size: 2em; }
.katex .sizing.reset-size2.size8, .katex .fontsize-ensurer.reset-size2.size8 { font-size: 2.4em; }
.katex .sizing.reset-size2.size9, .katex .fontsize-ensurer.reset-size2.size9 { font-size: 2.88em; }
.katex .sizing.reset-size2.size10, .katex .fontsize-ensurer.reset-size2.size10 { font-size: 3.45667em; }
.katex .sizing.reset-size2.size11, .katex .fontsize-ensurer.reset-size2.size11 { font-size: 4.14667em; }
.katex .sizing.reset-size3.size1, .katex .fontsize-ensurer.reset-size3.size1 { font-size: 0.714286em; }
.katex .sizing.reset-size3.size2, .katex .fontsize-ensurer.reset-size3.size2 { font-size: 0.857143em; }
.katex .sizing.reset-size3.size3, .katex .fontsize-ensurer.reset-size3.size3 { font-size: 1em; }
.katex .sizing.reset-size3.size4, .katex .fontsize-ensurer.reset-size3.size4 { font-size: 1.14286em; }
.katex .sizing.reset-size3.size5, .katex .fontsize-ensurer.reset-size3.size5 { font-size: 1.28571em; }
.katex .sizing.reset-size3.size6, .katex .fontsize-ensurer.reset-size3.size6 { font-size: 1.42857em; }
.katex .sizing.reset-size3.size7, .katex .fontsize-ensurer.reset-size3.size7 { font-size: 1.71429em; }
.katex .sizing.reset-size3.size8, .katex .fontsize-ensurer.reset-size3.size8 { font-size: 2.05714em; }
.katex .sizing.reset-size3.size9, .katex .fontsize-ensurer.reset-size3.size9 { font-size: 2.46857em; }
.katex .sizing.reset-size3.size10, .katex .fontsize-ensurer.reset-size3.size10 { font-size: 2.96286em; }
.katex .sizing.reset-size3.size11, .katex .fontsize-ensurer.reset-size3.size11 { font-size: 3.55429em; }
.katex .sizing.reset-size4.size1, .katex .fontsize-ensurer.reset-size4.size1 { font-size: 0.625em; }
.katex .sizing.reset-size4.size2, .katex .fontsize-ensurer.reset-size4.size2 { font-size: 0.75em; }
.katex .sizing.reset-size4.size3, .katex .fontsize-ensurer.reset-size4.size3 { font-size: 0.875em; }
.katex .sizing.reset-size4.size4, .katex .fontsize-ensurer.reset-size4.size4 { font-size: 1em; }
.katex .sizing.reset-size4.size5, .katex .fontsize-ensurer.reset-size4.size5 { font-size: 1.125em; }
.katex .sizing.reset-size4.size6, .katex .fontsize-ensurer.reset-size4.size6 { font-size: 1.25em; }
.katex .sizing.reset-size4.size7, .katex .fontsize-ensurer.reset-size4.size7 { font-size: 1.5em; }
.katex .sizing.reset-size4.size8, .katex .fontsize-ensurer.reset-size4.size8 { font-size: 1.8em; }
.katex .sizing.reset-size4.size9, .katex .fontsize-ensurer.reset-size4.size9 { font-size: 2.16em; }
.katex .sizing.reset-size4.size10, .katex .fontsize-ensurer.reset-size4.size10 { font-size: 2.5925em; }
.katex .sizing.reset-size4.size11, .katex .fontsize-ensurer.reset-size4.size11 { font-size: 3.11em; }
.katex .sizing.reset-size5.size1, .katex .fontsize-ensurer.reset-size5.size1 { font-size: 0.555556em; }
.katex .sizing.reset-size5.size2, .katex .fontsize-ensurer.reset-size5.size2 { font-size: 0.666667em; }
.katex .sizing.reset-size5.size3, .katex .fontsize-ensurer.reset-size5.size3 { font-size: 0.777778em; }
.katex .sizing.reset-size5.size4, .katex .fontsize-ensurer.reset-size5.size4 { font-size: 0.888889em; }
.katex .sizing.reset-size5.size5, .katex .fontsize-ensurer.reset-size5.size5 { font-size: 1em; }
.katex .sizing.reset-size5.size6, .katex .fontsize-ensurer.reset-size5.size6 { font-size: 1.11111em; }
.katex .sizing.reset-size5.size7, .katex .fontsize-ensurer.reset-size5.size7 { font-size: 1.33333em; }
.katex .sizing.reset-size5.size8, .katex .fontsize-ensurer.reset-size5.size8 { font-size: 1.6em; }
.katex .sizing.reset-size5.size9, .katex .fontsize-ensurer.reset-size5.size9 { font-size: 1.92em; }
.katex .sizing.reset-size5.size10, .katex .fontsize-ensurer.reset-size5.size10 { font-size: 2.30444em; }
.katex .sizing.reset-size5.size11, .katex .fontsize-ensurer.reset-size5.size11 { font-size: 2.76444em; }
.katex .sizing.reset-size6.size1, .katex .fontsize-ensurer.reset-size6.size1 { font-size: 0.5em; }
.katex .sizing.reset-size6.size2, .katex .fontsize-ensurer.reset-size6.size2 { font-size: 0.6em; }
.katex .sizing.reset-size6.size3, .katex .fontsize-ensurer.reset-size6.size3 { font-size: 0.7em; }
.katex .sizing.reset-size6.size4, .katex .fontsize-ensurer.reset-size6.size4 { font-size: 0.8em; }
.katex .sizing.reset-size6.size5, .katex .fontsize-ensurer.reset-size6.size5 { font-size: 0.9em; }
.katex .sizing.reset-size6.size6, .katex .fontsize-ensurer.reset-size6.size6 { font-size: 1em; }
.katex .sizing.reset-size6.size7, .katex .fontsize-ensurer.reset-size6.size7 { font-size: 1.2em; }
.katex .sizing.reset-size6.size8, .katex .fontsize-ensurer.reset-size6.size8 { font-size: 1.44em; }
.katex .sizing.reset-size6.size9, .katex .fontsize-ensurer.reset-size6.size9 { font-size: 1.728em; }
.katex .sizing.reset-size6.size10, .katex .fontsize-ensurer.reset-size6.size10 { font-size: 2.074em; }
.katex .sizing.reset-size6.size11, .katex .fontsize-ensurer.reset-size6.size11 { font-size: 2.488em; }
.katex .sizing.reset-size7.size1, .katex .fontsize-ensurer.reset-size7.size1 { font-size: 0.416667em; }
.katex .sizing.reset-size7.size2, .katex .fontsize-ensurer.reset-size7.size2 { font-size: 0.5em; }
.katex .sizing.reset-size7.size3, .katex .fontsize-ensurer.reset-size7.size3 { font-size: 0.583333em; }
.katex .sizing.reset-size7.size4, .katex .fontsize-ensurer.reset-size7.size4 { font-size: 0.666667em; }
.katex .sizing.reset-size7.size5, .katex .fontsize-ensurer.reset-size7.size5 { font-size: 0.75em; }
.katex .sizing.reset-size7.size6, .katex .fontsize-ensurer.reset-size7.size6 { font-size: 0.833333em; }
.katex .sizing.reset-size7.size7, .katex .fontsize-ensurer.reset-size7.size7 { font-size: 1em; }
.katex .sizing.reset-size7.size8, .katex .fontsize-ensurer.reset-size7.size8 { font-size: 1.2em; }
.katex .sizing.reset-size7.size9, .katex .fontsize-ensurer.reset-size7.size9 { font-size: 1.44em; }
.katex .sizing.reset-size7.size10, .katex .fontsize-ensurer.reset-size7.size10 { font-size: 1.72833em; }
.katex .sizing.reset-size7.size11, .katex .fontsize-ensurer.reset-size7.size11 { font-size: 2.07333em; }
.katex .sizing.reset-size8.size1, .katex .fontsize-ensurer.reset-size8.size1 { font-size: 0.347222em; }
.katex .sizing.reset-size8.size2, .katex .fontsize-ensurer.reset-size8.size2 { font-size: 0.416667em; }
.katex .sizing.reset-size8.size3, .katex .fontsize-ensurer.reset-size8.size3 { font-size: 0.486111em; }
.katex .sizing.reset-size8.size4, .katex .fontsize-ensurer.reset-size8.size4 { font-size: 0.555556em; }
.katex .sizing.reset-size8.size5, .katex .fontsize-ensurer.reset-size8.size5 { font-size: 0.625em; }
.katex .sizing.reset-size8.size6, .katex .fontsize-ensurer.reset-size8.size6 { font-size: 0.694444em; }
.katex .sizing.reset-size8.size7, .katex .fontsize-ensurer.reset-size8.size7 { font-size: 0.833333em; }
.katex .sizing.reset-size8.size8, .katex .fontsize-ensurer.reset-size8.size8 { font-size: 1em; }
.katex .sizing.reset-size8.size9, .katex .fontsize-ensurer.reset-size8.size9 { font-size: 1.2em; }
.katex .sizing.reset-size8.size10, .katex .fontsize-ensurer.reset-size8.size10 { font-size: 1.44028em; }
.katex .sizing.reset-size8.size11, .katex .fontsize-ensurer.reset-size8.size11 { font-size: 1.72778em; }
.katex .sizing.reset-size9.size1, .katex .fontsize-ensurer.reset-size9.size1 { font-size: 0.289352em; }
.katex .sizing.reset-size9.size2, .katex .fontsize-ensurer.reset-size9.size2 { font-size: 0.347222em; }
.katex .sizing.reset-size9.size3, .katex .fontsize-ensurer.reset-size9.size3 { font-size: 0.405093em; }
.katex .sizing.reset-size9.size4, .katex .fontsize-ensurer.reset-size9.size4 { font-size: 0.462963em; }
.katex .sizing.reset-size9.size5, .katex .fontsize-ensurer.reset-size9.size5 { font-size: 0.520833em; }
.katex .sizing.reset-size9.size6, .katex .fontsize-ensurer.reset-size9.size6 { font-size: 0.578704em; }
.katex .sizing.reset-size9.size7, .katex .fontsize-ensurer.reset-size9.size7 { font-size: 0.694444em; }
.katex .sizing.reset-size9.size8, .katex .fontsize-ensurer.reset-size9.size8 { font-size: 0.833333em; }
.katex .sizing.reset-size9.size9, .katex .fontsize-ensurer.reset-size9.size9 { font-size: 1em; }
.katex .sizing.reset-size9.size10, .katex .fontsize-ensurer.reset-size9.size10 { font-size: 1.20023em; }
.katex .sizing.reset-size9.size11, .katex .fontsize-ensurer.reset-size9.size11 { font-size: 1.43981em; }
.katex .sizing.reset-size10.size1, .katex .fontsize-ensurer.reset-size10.size1 { font-size: 0.24108em; }
.katex .sizing.reset-size10.size2, .katex .fontsize-ensurer.reset-size10.size2 { font-size: 0.289296em; }
.katex .sizing.reset-size10.size3, .katex .fontsize-ensurer.reset-size10.size3 { font-size: 0.337512em; }
.katex .sizing.reset-size10.size4, .katex .fontsize-ensurer.reset-size10.size4 { font-size: 0.385728em; }
.katex .sizing.reset-size10.size5, .katex .fontsize-ensurer.reset-size10.size5 { font-size: 0.433944em; }
.katex .sizing.reset-size10.size6, .katex .fontsize-ensurer.reset-size10.size6 { font-size: 0.48216em; }
.katex .sizing.reset-size10.size7, .katex .fontsize-ensurer.reset-size10.size7 { font-size: 0.578592em; }
.katex .sizing.reset-size10.size8, .katex .fontsize-ensurer.reset-size10.size8 { font-size: 0.694311em; }
.katex .sizing.reset-size10.size9, .katex .fontsize-ensurer.reset-size10.size9 { font-size: 0.833173em; }
.katex .sizing.reset-size10.size10, .katex .fontsize-ensurer.reset-size10.size10 { font-size: 1em; }
.katex .sizing.reset-size10.size11, .katex .fontsize-ensurer.reset-size10.size11 { font-size: 1.19961em; }
.katex .sizing.reset-size11.size1, .katex .fontsize-ensurer.reset-size11.size1 { font-size: 0.200965em; }
.katex .sizing.reset-size11.size2, .katex .fontsize-ensurer.reset-size11.size2 { font-size: 0.241158em; }
.katex .sizing.reset-size11.size3, .katex .fontsize-ensurer.reset-size11.size3 { font-size: 0.28135em; }
.katex .sizing.reset-size11.size4, .katex .fontsize-ensurer.reset-size11.size4 { font-size: 0.321543em; }
.katex .sizing.reset-size11.size5, .katex .fontsize-ensurer.reset-size11.size5 { font-size: 0.361736em; }
.katex .sizing.reset-size11.size6, .katex .fontsize-ensurer.reset-size11.size6 { font-size: 0.401929em; }
.katex .sizing.reset-size11.size7, .katex .fontsize-ensurer.reset-size11.size7 { font-size: 0.482315em; }
.katex .sizing.reset-size11.size8, .katex .fontsize-ensurer.reset-size11.size8 { font-size: 0.578778em; }
.katex .sizing.reset-size11.size9, .katex .fontsize-ensurer.reset-size11.size9 { font-size: 0.694534em; }
.katex .sizing.reset-size11.size10, .katex .fontsize-ensurer.reset-size11.size10 { font-size: 0.833601em; }
.katex .sizing.reset-size11.size11, .katex .fontsize-ensurer.reset-size11.size11 { font-size: 1em; }
.katex .delimsizing.size1 { }
.katex .delimsizing.size2 { }
.katex .delimsizing.size3 { }
.katex .delimsizing.size4 { }
.katex .delimsizing.mult .delim-size1 > span { }
.katex .delimsizing.mult .delim-size4 > span { }
.katex .nulldelimiter { display: inline-block; width: 0.12em; }
.katex .delimcenter { position: relative; }
.katex .op-symbol { position: relative; }
.katex .op-symbol.small-op { }
.katex .op-symbol.large-op { }
.katex .op-limits > .vlist-t { text-align: center; }
.katex .accent > .vlist-t { text-align: center; }
.katex .accent .accent-body > span { width: 0px; }
.katex .accent .accent-body.accent-vec > span { position: relative; left: 0.326em; }
.katex .accent .accent-body.accent-hungarian > span { position: relative; left: 0.25em; }
.katex .mtable .vertical-separator { display: inline-block; margin: 0px -0.025em; width: 0.05em; }
@media screen {
.katex .mtable .vertical-separator { min-width: 1px; }
}
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi) {
.katex .mtable .vertical-separator { min-width: 0.5px; }
}
.katex .mtable .arraycolsep { display: inline-block; }
.katex .mtable .col-align-c > .vlist-t { text-align: center; }
.katex .mtable .col-align-l > .vlist-t { text-align: left; }
.katex .mtable .col-align-r > .vlist-t { text-align: right; }
.katex .svg-align { text-align: left; }
.katex svg { display: block; position: absolute; width: 100%; }
.katex svg path { fill: currentcolor; }
.katex svg line { stroke: currentcolor; }
.katex .stretchy { width: 100%; display: block; }
.katex .stretchy::before, .katex .stretchy::after { content: ""; }
.katex .hide-tail { width: 100%; position: relative; overflow: hidden; }
.katex .halfarrow-left { position: absolute; left: 0px; width: 50.1%; overflow: hidden; }
.katex .halfarrow-right { position: absolute; right: 0px; width: 50%; overflow: hidden; }
.katex .brace-left { position: absolute; left: 0px; width: 25.1%; overflow: hidden; }
.katex .brace-center { position: absolute; left: 25%; width: 50%; overflow: hidden; }
.katex .brace-right { position: absolute; right: 0px; width: 25.1%; overflow: hidden; }
.katex .x-arrow-pad { padding: 0px 0.5em; }
.katex .x-arrow, .katex .mover, .katex .munder { text-align: center; }
.katex .boxpad { padding: 0px 0.3em; }
.katex .fbox { box-sizing: border-box; border: 0.04em solid black; }
.katex .fcolorbox { box-sizing: border-box; border: 0.04em solid; }
.katex .cancel-pad { padding: 0px 0.2em; }
.katex .mord + .cancel-lap, .katex .mbin + .cancel-lap { margin-left: -0.2em; }
.katex .cancel-lap + .mord, .katex .cancel-lap + .mbin, .katex .cancel-lap + .msupsub { margin-left: -0.2em; }
.katex .sout { border-bottom-style: solid; border-bottom-width: 0.08em; }
.output_wrapper .hljs{color: rgb(169, 183, 198); background: rgb(40, 43, 46); display: block; overflow-x: auto; padding: 0.5em;}

.output_wrapper .hljs-params{color: rgb(255, 152, 35);}

.output_wrapper .hljs-number,.output_wrapper .hljs-literal,.output_wrapper .hljs-symbol,.output_wrapper .hljs-bullet{color: rgb(174, 135, 250);}

.output_wrapper .hljs-function,.output_wrapper .hljs-built_in,.output_wrapper .hljs-name,.output_wrapper .hljs-keyword,.output_wrapper .hljs-selector-tag,.output_wrapper .hljs-deletion{color: rgb(248, 35, 117);}

.output_wrapper .hljs-variable,.output_wrapper .hljs-template-variable,.output_wrapper .hljs-link{color: rgb(98, 151, 85);}

.output_wrapper .hljs-comment,.output_wrapper .hljs-quote{color: rgb(128, 128, 128);}

.output_wrapper .hljs-meta{color: rgb(91, 218, 237);}

.output_wrapper .hljs-string,.output_wrapper .hljs-attribute,.output_wrapper .hljs-addition{color: rgb(238, 220, 112);}

.output_wrapper .hljs-attr,.output_wrapper .hljs-section,.output_wrapper .hljs-title,.output_wrapper .hljs-type{color: rgb(165, 218, 45);}

.output_wrapper .hljs-selector-class{color: rgb(165, 218, 45);}

.output_wrapper .hljs-emphasis{font-style: italic;}

.output_wrapper .hljs-strong{font-weight: bold;}

.output_wrapper pre code {line-height: 18px; font-size: 14px; font-weight: normal; word-spacing: 0px; letter-spacing: 0px;}
.output_wrapper{font-size: 16px; color: rgb(62, 62, 62); line-height: 1.6; font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;}

.output_wrapper *{font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px;}

.output_wrapper p{margin: 1.5em 0px;}

.output_wrapper h1,.output_wrapper h2,.output_wrapper h3,.output_wrapper h4,.output_wrapper h5,.output_wrapper h6{margin: 1.5em 0px; font-weight: bold;}

.output_wrapper h1{font-size: 1.6em;}

.output_wrapper h2{font-size: 1.4em;}

.output_wrapper h3{font-size: 1.3em;}

.output_wrapper h4{font-size: 1.2em;}

.output_wrapper h5{font-size: 1em;}

.output_wrapper h6{font-size: 1em;}

.output_wrapper h3{margin-bottom: 2em; margin-right: 5px; padding: 8px 15px; letter-spacing: 2px; background-image: linear-gradient(to right bottom, rgb(0, 100, 180), rgb(63, 80, 150)); background-color: rgb(63, 81, 181); color: rgb(255, 255, 255); border-left: 10px solid rgb(180, 180, 180); border-radius: 5px; text-shadow: rgb(102, 102, 102) 1px 1px 1px; box-shadow: rgb(102, 102, 102) 1px 1px 2px;}

.output_wrapper ul,.output_wrapper ol{padding-left: 32px;}

.output_wrapper ul{list-style-type: disc;}

.output_wrapper ol{list-style-type: decimal;}

.output_wrapper li *{}

.output_wrapper li{margin-bottom: 0.5em;}

.output_wrapper .code_size_default{line-height: 18px; font-size: 14px; font-weight: normal; word-spacing: 0px; letter-spacing: 0px;}

.output_wrapper .code_size_tight{line-height: 15px; font-size: 11px; font-weight: normal; word-spacing: -3px; letter-spacing: 0px;}

.output_wrapper pre code{font-family: Consolas, Inconsolata, Courier, monospace;}

.output_wrapper blockquote{display: block; padding: 15px 15px 15px 1rem; font-size: 0.9em; margin: 1em 0px; color: rgb(129, 145, 152); border-left: 6px solid rgb(220, 230, 240); background: rgb(242, 247, 251); overflow: auto; word-wrap: normal; word-break: normal;}

.output_wrapper blockquote p{margin: 0px;}

.output_wrapper a{text-decoration: none; color: rgb(30, 107, 184); word-wrap: break-word;}

.output_wrapper strong{font-weight: bold;}

.output_wrapper em{font-style: italic;}

.output_wrapper del{font-style: italic;}

.output_wrapper strong em{font-weight: bold;}

.output_wrapper hr{height: 1px; margin: 1.5rem 0px; border-right: none; border-bottom: none; border-left: none; border-image: initial; border-top: 1px dashed rgb(165, 165, 165);}

.output_wrapper p code{word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(233, 105, 0); background: rgb(248, 248, 248);}

.output_wrapper img{display: block; margin: 0px auto; max-width: 100%;}

.output_wrapper table{display: table; width: 100%; text-align: left;}

.output_wrapper tbody{border: 0px;}

.output_wrapper table tr{border-width: 1px 0px 0px; border-right-style: initial; border-bottom-style: initial; border-left-style: initial; border-right-color: initial; border-bottom-color: initial; border-left-color: initial; border-image: initial; border-top-style: solid; border-top-color: rgb(204, 204, 204); background-color: white;}

.output_wrapper table tr th,.output_wrapper table tr td{font-size: 1em; border: 1px solid rgb(204, 204, 204); padding: 0.5em 1em; text-align: left;}

.output_wrapper table tr th{font-weight: bold; background-color: rgb(240, 240, 240);}
-->

一、手势事件

下面二维码是一个实例dome，可扫码直接查看:

在ios系统中，系统自带了gesture事件，两个手指操作的时候，就会产生一下三种手势事件：

gesturestart：当一个手指已经按在屏幕上，另一个手指又触摸屏幕的时候触发。
gesturechange：当触摸屏幕的任何一个手指的位置发生变化的时候触发。
gestureend：当任何一个手指从屏幕上面移开时触发。

这里通过js自定义事件模仿ios的手势事件为Android添加相同的功能；

实现基本思路

在Android中我们可以监听touchstart、touchmove、touchend去实现手势事件的监听，
当触发touch事件的时候，会生成一个TouchEvent对象，我们可通过其属性e.touches.length来判断是否多点触控，通过e.touches[index].pageX,e.touches[index].pageY获取去触点坐标，通过e.target获取dom节点；

实现方法

1、创建自定义事件
var gesturestart = new CustomEvent(‘gesturestart‘);var gesturechange = new CustomEvent(‘gesturestart‘);var gestureend = new CustomEvent(‘gesturestart‘);

1、gesturestart

首先定义两个变量存储触发状态和起始点信息

var istouch = false;ar start = [];

监听touchstart事件，通过e.touches.length>2判断是否多点触控，如果是，触发自定义事件gesturestart

document.addEventListener("touchstart", function(e) {    if(e.touches.length >= 2) { //判断是否有两个点在屏幕上        istouch = true;        start = e.touches; //得到第一组两个点        e.target.dispatchEvent(gesturestart);    };}, false);

2、gesturechange

gesturechange事件中我们需在事件对象中返回以下两个属性：

  • scale：表示两个手指之间的距离情况，向内收缩会缩短距离，这个值从1开始，并随距离拉大而增长
  • rotation：表示手指变化引起的旋转角度，负值表示逆时针，正值表示顺时针，从零开始。
    对于两点间的距离我们可由以下公式计算

（1）缩放比例可通过两组点之间的长度比计算

　　　　scale =  dis1   /   dis2
      首先编写方法两点之间距离的方法（勾股定理）

　　

function getDistance(p1, p2) {    var x = p2.pageX - p1.pageX,        y = p2.pageY - p1.pageY;    return Math.sqrt((x * x) + (y * y));};

（2）对于旋转角度第一组点的夹角与第二组点的夹角相减得到

　　　　deg= deg2-deg1 =arctan (x2-x1/y2-y1) - arctan (x4-x3/y4-y3) 　

编写获取夹角方法（反三角函数求夹角，注意弧度转化为角度）

function getAngle(p1, p2) {    var x = p1.pageX - p2.pageX,        y = p1.pageY - p2.pageY;    return Math.atan2(y, x) * 180 / Math.PI;};

监听touchmove事件，通过e.touches.length >= 2和istouch判断是否触发gesturechange事件

document.addEventListener("touchmove", function(e) {    e.preventDefault();    if(e.touches.length >= 2 && istouch) {        var now = e.touches; //得到第二组触点        var scale = getDistance(now[0], now[1]) / getDistance(start[0], start[1]); //得到缩放比例        var rotation = getAngle(now[0], now[1]) - getAngle(start[0], start[1]); //得到旋转角度        gesturechange.scale = scale.toFixed(2);        gesturechange.rotation = rotation.toFixed(2);        e.target.dispatchEvent(gesturechange);      };}, false);

3、gestureend

监听touchend事件，通过istouch判断是否触发gestureend 事件

document.addEventListener("touchend", function(e) {    if(istouch) {        istouch = false;        e.target.dispatchEvent(gestureend);    };}, false);

4、系统环境判断

function isAndroid(p1, p2) {    var u = navigator.userAgent;    return u.indexOf(‘Android‘) > -1 || u.indexOf(‘Adr‘) > -1; //是否android终端};

封装以上方法并执行，即可实现安卓端与ios的手势事件兼容


[1]: 部分代码参考https://blog.csdn.net/qq_17757973/article/details/54604625

原文地址：https://www.cnblogs.com/pangys/p/9119845.html

时间： 2024-10-29 12:05:45

Android系统下用js自定义gesture事件（仿ios实现移动端事件一致）的相关文章

(原)android系统下绑定Server的时候报MainActivity has leaked ServiceConnection的错误

今天在android系统下根据官方的demo代码,我们需要启动一个服务,并绑定,但在程序启动以后,老是报错: Activity MainActivity has leaked ServiceConnection CameraUtil$[email protected] that was originally bound here android.app.ServiceConnectionLeaked: Activity MainActivity has leaked ServiceConnect

iTOP-iMX6开发板Android系统下LVDS和HDMI双屏异显方法

迅为iMX6 开发板 android 系统下 LVDS 和 HDMI 双屏异显的使用过程. 使用"Mfgtools-Rel-1.1.0_180403_MX6Q_UPDATER"版本的烧写工具,把系统烧写进开发板.系统启动之后,把".mp4"格式的视频文件放到"/sdcard"目录下,如下图所示. 然后打开系统自带的"HdmiDualVideo"应用程序.如下图. 在 lvds 屏幕上显示如下图所示. 点击"Small

S5P6818开发板在Android系统下关于型号/版本号的修改位置

Q:请教一下,RP6818开发板android系统中,设置/关于平板电脑  里面的型号/版本号 等信息在源码哪里修改? A:有一部分是build.prop里的,有一部分可以改设置里的源码. Q:我希望在源码编译之前全部修改,总不能在系统启动之后去修改build.prop. 比如这些信息在源码哪里改? A:这些改了有一些库可能编译不通过. 你现在主要的问题就是设置里的显示的信息. Q:对的. A:那么直接改设置里的源码. Q:一个是型号,一个是版本号.主要是这两个. A:找到设置那部分源码,直接写

Android系统下，用adb实现自动获取应用性能数据

[自动化测试模式] 支持以adb shell命令的形式启动和运行.需要注意的是,office系列软件可能会更改命令中的字符,导致命令不可用!请手工输入命令,或从附带的command.txt文本中复制. 1.启动首页 adb shell am start -a android.intent.action.MAIN -c android.intent.category.LAUNCHER -n iflytek.testTech.androidpropertytool/.MainAc 2.开启监控 依次

解决Android系统下某些手机RadioButton无法居中（如三星G3508)

在开发项目过程中遇到个奇葩的问题,那就是用RadioButton来实现tab选项卡效果时设置了内容居中却还是无法有效果,还是发生了偏移,但在其他手机上却正常,比如在Note3手机上却能正常显示,经几番周折终于解决了,非常兴奋,解决办法如下: 把每个RadioButton的backgournd设置一个背景或透明就行了,网络上也有说是设置paddingLeft=0dp也能解决,经过我的测试确实也能解决这个问题,最终理想效果如下: 欢迎加入移动互联网QQ群讨论学习:285077071

基于Android系统应用层与框架层剖析View点击事件

基于Android操作系统的框架层和应用层,介绍了View的绘制.触摸事件的传递流程,分析了View与用户交互时被回调的相关框架层代码和应用层代码,研究了Android应用中事件处理的相关重要机制.通过具体代码详细剖析了在Android系统下用户和View交互过程中折射出的回调机制,回调方法在系统框架的详细执行过程,以及基于回调机制的经典事件处理模型. 1 引言 Android是一种基于Linux的自由及开放源代码的操作系统,目前基于Android平台的应用日趋广泛.Android应用程序大多基

漫谈js自定义事件、DOM/伪DOM自定义事件

一.说明.引言 我JS还是比较薄弱的,本文的内容属于边学边想边折腾的碎碎念,可能没什么条理,可能有表述不准确的地方,可能内容比较拗口生僻.如果您时间紧迫,或者JS造诣已深,至此您就可以点击右侧广告(木有?则RSS或盗版)然后撤了. 事件是个大课题,真要从断奶开始讲起的话,可以写个12期的连载.关于JS事件的文章(类似DOM/BOM事件模型,IE与其他浏览器事件差异,DOM1/DOM2事件定义等)落叶般随处可见.熟豆子反复炒一点意思都没有,因此,这里谈谈自己感兴趣的自定义事件以及周边. 所谓自定义

js自定义事件、DOM/伪DOM自定义事件

一.说明.引言 我JS还是比较薄弱的,本文的内容属于边学边想边折腾的碎碎念,可能没什么条理,可能有表述不准确的地方,可能内容比较拗口生僻.如果您时间紧迫,或者JS造诣已深,至此您就可以点击右侧广告(木有?则RSS或盗版)然后撤了. 事件是个大课题,真要从断奶开始讲起的话,可以写个12期的连载.关于JS事件的文章(类似DOM/BOM事件模型,IE与其他浏览器事件差异,DOM1/DOM2事件定义等)落叶般随处可见.熟豆子反复炒一点意思都没有,因此,这里谈谈自己感兴趣的自定义事件以及周边. 所谓自定义

Android系统的五种数据存储形式（二）

之前介绍了Android系统下三种数据存储形式,今天补充介绍另外两种,分别是内容提供者和网络存储.有些人可能认为内存提供者和网络存储更偏向于对数据的操作而不是数据的存储,但这两种方式确实与数据有关,所以这里还是将这两种形式简要的说明一下. Content Provider: Content Provider,中文名是内存提供者,Android四大组件之一,内容提供者是应用程序之间共享数据的接口,以数据库形式存入手机内存,可以共享自己的数据给其他应用使用.之所以需要设计一个单独的控件来操作数据,是