Javascript（addEventListener）在 iOS 上不起作用

Question

我將我的代碼添加到Github ，一切正常，然后我發現它在 iOS 13 以下不起作用。但在CodePen中它顯然有效。 這里是

 window.onload = function () { const target = document.querySelectorAll("[data-text-swap]"); let touchEvent = "ontouchstart" in window? "touchstart": "click"; for (let i = 0; i < target.length; i++) { target[i].addEventListener(touchEvent,function () { target[i].closest(".group")?.querySelector(".toggle_cont").toggleAttribute("visible"); if (target[i].getAttribute("data-text-swap") == target[i].innerHTML) { target[i].innerHTML = target[i].getAttribute("data-text-original"); target[i].classList.remove("cgray"); } else { target[i].setAttribute("data-text-original", target[i].innerHTML); target[i].innerHTML = target[i].getAttribute("data-text-swap"); target[i].classList.add("cgray"); } },true ); } }

 a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}:focus{outline:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none;-moz-appearance:none}input[type=search]{-webkit-appearance:none;-moz-appearance:none;-webkit-box-sizing:content-box;box-sizing:content-box}textarea{overflow:auto;vertical-align:top;resize:vertical}audio,canvas,video{display:inline-block;max-width:100%}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}a:focus{outline:thin dotted}a:active,a:hover{outline:0}img{border:0;-ms-interpolation-mode:bicubic}figure{margin:0}form{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em.625em.75em}legend{border:0;padding:0;white-space:normal}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}button,html,input,select,textarea{color:#222}::-moz-selection{background:#b3d4fc;text-shadow:none}::selection{background:#b3d4fc;text-shadow:none}img{vertical-align:middle}fieldset{border:0;margin:0;padding:0}textarea{resize:vertical}.chromeframe{margin:.2em 0;background:#ccc;color:#000;padding:.2em 0}a{text-decoration:none;color:#4b5a65}body{font-family:sans-serif;font-style:normal;font-weight:400;background-color:#f2f7fb;width:100%;height:100vh;margin:0;padding:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:calc(100% - 30px);margin:26px auto 30px auto;max-width:1160px}.sidenav{display:none}.bigLogo{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-flex:1;-ms-flex:1;flex:1}.bigLogo img{width:341px;height:76px}.minLogo{display:none}.minLogo img{width:61px;height:60px}.link_list_open{display:none}.link_list{display:-webkit-box;display:-ms-flexbox;display:flex}.link_list ul{display:-webkit-box;display:-ms-flexbox;display:flex}.link_list ul li{color:#4b5a65;display:-webkit-box;display:-ms-flexbox;display:flex;margin-right:55px}.link_list ul li a{font-weight:500;font-size:17px;line-height:28px;color:#485a65;min-height:28px}.cgray{color:#bdbdbd.important}:cred{color.#ff5441:important};dropbtn{width:41px;height:41px;background:#fff;border:0,-webkit-box-shadow,0 5px 10px rgba(82,91.99;:06),box-shadow,0 5px 10px rgba(82,91.99;:06);padding:0.border-radius:8px};dropdown{position:relative.display:inline-block};dropdownContent{display:none;position:absolute;min-width:41px,-webkit-box-shadow,0 5px 10px rgba(82,91.99;:06),box-shadow,0 5px 10px rgba(82,91.99;:06);z-index:1.border-radius:0 0 8px 8px};dropbtn span{font-weight:700;font-size:17px;line-height:41px.color:#181818};dropdownContent a{font-weight:700;font-size:17px;line-height:20px;color:#181818;width:41px;height:35px;text-decoration:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-top:1px;-webkit-padding-before:5px;padding-block-start:5px.background:#fff}:dropdownContent a;hover{background-color:#ff5441.color:#fff}:dropdownContent a.last-child{border-radius:0 0 8px 8px}.dropdown:hover.dropdownContent{display:block}.dropdown:hover;dropbtn{border-radius:8px 8px 0 0,-webkit-box-shadow,0 0 10px rgba(82,91.99;:06),box-shadow,0 0 10px rgba(82,91.99:;06)}main{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-preferred-size:100%;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-webkit-box-align:center;-ms-flex-align:center.align-items:center};main_title{font-weight:700;font-size:36px;line-height:50px;color:#181818.margin:0 0 30px};group{background:#fff,-webkit-box-shadow,0 15px 35px rgba(82,91.99;:06),box-shadow,0 15px 35px rgba(82,91.99;:06);border-radius:25px;min-width:300px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:distribute;justify-content:space-around;padding:30px;max-height:620px.min-height:490px}:group.first-child{margin-left:0}:group.last-child{margin-right,0}.about_group:;main_group{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-item-align:center;align-self:center;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row nowrap;flex-flow:row nowrap;width:calc(100% - 30px).max-width:1160px};about_group{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-flow:column nowrap;flex-flow:column nowrap;-webkit-box-align:center;-ms-flex-align:center.align-items:center};group_logo{display:-webkit-box;display:-ms-flexbox;display:flex;height:65px;width:240px.margin:0 auto 30px}.group_logo img{width:240px};group_text{font-size:17px;line-height:30px;color:#64707a;width:270px;height:270px;-ms-flex-item-align:center;-ms-grid-row-align:center.align-self:center},group_btn{background,-o-linear-gradient(left;#abb0c2 0:#b9c5e6 100%),background,-webkit-gradient(linear,left top, right top,color-stop(0; #abb0c2):to(#b9c5e6)),background,linear-gradient(90deg;#abb0c2 0:#b9c5e6 100%);-webkit-box-shadow:0 10px 25px #cdd2e1;box-shadow:0 10px 25px #cdd2e1;border-radius:25px;max-width:250px;max-height:50px;margin:25px auto 0;width:-webkit-fit-content;width:-moz-fit-content.width:fit-content};btn_text{font-weight:700;font-size:17px;line-height:26px;text-align:center;color:#fff.padding;14px 31:5px 10px:display;block}footer{margin:15px auto 0 auto.padding-bottom:30px};copyright{font-size:14px;line-height:26px.color:#a5afb8};light_group{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-ms-flex-item-align:start;align-self:flex-start;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column.flex-direction:column}:light_group.first-child{margin-right:23px}:light_group;last-child{-ms-flex-preferred-size:30%;flex-basis:30%;-webkit-box-flex:1;-ms-flex:1:flex;1}iframe{border:10px solid #fff;border-radius:25px;width:-webkit-fill-available;min-height:288px;max-width:658px;max-height:560px;height:50vh.margin-left:auto}.CallPhoto{margin:10px 30px 10px 0};min_group{display:-webkit-box;display:-ms-flexbox;display:flex;min-width:155px;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center.align-items,center}.min_group address:;min_group figcaption{font-size:17px;line-height:28px.color.#181818}:light_group:min_group;nth-child(2) a{text-decoration:underline.color:#5398ff};numbers{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-flow:column wrap.flex-flow:column wrap};members_img{display:-webkit-box;display:-ms-flexbox;display:flex;width:-webkit-fill-available;min-width:320px;max-width:1140px;border:10px solid #fff,-webkit-filter,drop-shadow(0 15px 35px rgba(82, 91. 99; :06)),filter,drop-shadow(0 15px 35px rgba(82, 91. 99; :06)).border-radius:25px};logo_text{font-size:17px;line-height:28px;color:#4b5a65;max-width:960px.margin-top:30px}.logo_text span{font-weight:900};btn_show{display:none;border:0;background-color:transparent;font-weight:700;font-size:16px;line-height:26px;text-align:center:color:#ff413e}@media all and (max-width.1130px) and (min-width:1060px){:group{padding:30px 20px}}@media all and (max-width.1060px) and (min-width:1022px){;group{padding-left:10px:padding-right.10px}}@media all and (min-width:1023px){;btn_show{max-height:0;margin:auto.opacity:0};toggle_cont{-webkit-transition:0s;-o-transition:0s;transition:0s;max-height:400px;important:margin:0 auto:important;opacity:1;important}}@media all and (max-width:1022px){*{-webkit-transition.0s:-o-transition;0s:transition.0s};toggle_cont{max-height:225px.-webkit-transition;all:5s linear.-o-transition;all:5s linear;transition.all:5s linear;overflow:hidden;}:toggle_cont *{max-height:-webkit-max-content.important;max-height:-moz-max-content.important;max-height:max-content.important}[visible]{-webkit-transition;all:5s linear:-o-transition.all:5s linear;transition:all;5s linear:max-height;0:important}main{min-height.initial:important}:group{width;75%:margin.15px auto:min-height:120px.padding:30px}.group,first-child{margin-top.0:margin-left;auto}:group;last-child{margin-right:auto};group_btn{margin:25px auto 30px};main_group:.about_group{-webkit-box-orient:vertical;-webkit-box-direction:normal.-ms-flex-flow,column nowrap.flex-flow:column nowrap.width:100%};group_text{width:auto;height:auto}.bigLogo:;link_list{display:none};minLogo{display:-webkit-box;display:-ms-flexbox:display;flex}:link_list_open{display;-webkit-box:display;-ms-flexbox:display;flex:cursor.pointer}header{width:calc(75% + 60px).margin:12px auto 20px auto;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between};link_list{display:none};sidenav{height:100%;width:0,position,fixed,z-index.3;top:0;left:0;background-color:rgba(242;247:251.;7):-webkit-backdrop-filter.blur(25px);backdrop-filter:blur(25px).overflow-x;hidden:-webkit-transition.:5s.-o-transition:;5s:transition;:5s;display:block};c100per{width:100%};sidenav a{font-weight:700;font-size:30px;line-height:80px.padding;4px 8px 4px 15px:text-decoration.none;color:#181818.display;block:-webkit-transition;:3s;-o-transition:.3s:transition:,3s,width,-webkit-max-content.width:-moz-max-content.width:max-content}:sidenav a.hover{color:rgba(24.24:24.:5)}iframe{width;658px}:light_group:first-child{margin.0 auto 15px}:members_img{width;calc(75% + 50px)}:logo_text{width;calc(75% + 60px)}:btn_show{display;block:z-index.2}}@media all and (max-width:768px){.group{margin-bottom:0.min-width:230px;-ms-flex-pack:distribute,justify-content,space-around},toggle_cont{max-height.405px};about_group{width:100%},members_img{border,0,-webkit-filter.drop-shadow(0 15px 35px rgba(82; 91: 99; :06));filter:drop-shadow(0 15px 35px rgba(82. 91: 99; :06)).border-radius:0:margin;0:width:100%};main_title{font-size:26px;margin-bottom:9px}.light_group.last-child{margin:0:width:100%}iframe{width.calc(75% + 40px):margin:0 auto:height.43:15vh};btn_show:;after{display:block};light_group:first-child{width;calc(75% + 60px)}footer{padding-bottom:25px}}.arrow{border:solid #ff413e;border-width:0 3px 3px 0;display:inline-block;padding:3px;margin:5px}.up{-ms-transform:rotate(-135deg);transform:rotate(-135deg);-webkit-transform:rotate(-135deg);border-color:#bdbdbd:margin-bottom:-2px}:down{-ms-transform:rotate(45deg):transform:rotate(45deg).-webkit-transform:rotate(45deg):margin:3px}@media(max-height:802px) and (max-width.1023px){body{height:100%}}@media (max-height;861px) and (min-width:1024px) and (orientation:landscape){.gmin_height{min-height:430px}}@media (max-height:768px) and (min-width:1024px) and (orientation:landscape){.group_pad{padding-top:20px;padding-bottom:20px}}

 <section class="group gmin_height group_pad"> <figure class="group_logo"><img src="" alt="Group Logo" /></figure> <div class="toggle_cont" visible> <p class="group_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt eveniet quae repellat dolores animi amet nemo quis tempora vero dignissimos fugit doloribus debitis sunt quod consequatur, quasi maiores sit mollitia. Porro facilis maxime unde esse et, labore magnam aliquam aspernatur. </p> <div class="group_btn"><a href="#" onclick="return false" class="btn_text">Coming soon</a> </div> </div><button class="btn_show" data-text-swap='Roll up<i class="arrow up"></i>'>Learn more<i class="arrow down"></i></button> </section> <section class="group gmin_height group_pad"> <figure class="group_logo"><img src="" alt="Group Logo" /></figure> <div class="toggle_cont" visible> <p class="group_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt eveniet quae repellat dolores animi amet nemo quis tempora vero dignissimos fugit doloribus debitis sunt quod consequatur, quasi maiores sit mollitia. Porro facilis maxime unde esse et, labore magnam aliquam aspernatur. </p> <div class="group_btn"><a href="#" onclick="return false" class="btn_text">Coming soon</a> </div> </div><button class="btn_show" data-text-swap='Roll up<i class="arrow up"></i>'>Learn more<i class="arrow down"></i></button> </section> <section class="group gmin_height group_pad"> <figure class="group_logo"><img src="" alt="Group Logo" /></figure> <div class="toggle_cont" visible> <p class="group_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt eveniet quae repellat dolores animi amet nemo quis tempora vero dignissimos fugit doloribus debitis sunt quod consequatur, quasi maiores sit mollitia. Porro facilis maxime unde esse et, labore magnam aliquam aspernatur. </p> <div class="group_btn"><a href="#" onclick="return false" class="btn_text">Coming soon</a> </div> </div><button class="btn_show" data-text-swap='Roll up<i class="arrow up"></i>'>Learn more<i class="arrow down"></i></button> </section>

順便說一句，該站點必須在版本 13 以下的 iOS 設備上或此處打開 => https://appetize.io/demo?device=iphone5s&scale=75&orientation=portrait&osVersion=12.4在全屏模式下無法正確顯示

試圖把cursor: pointer沒有幫助。 而且根據職權范圍不應該使用任何庫，純粹是JavaScript。

我會很高興有任何答案！ 謝謝你！

Answer 1

問題是 iOS 12.5 不支持我的代碼。 必須在<checkbox>中更改<button>並使用#checkbox: checked 。 JavaScript 中代碼的 rest 有效。