IE와 Edge에서 onclick 이벤트 시 더블클릭 이슈 + 엣지의 html()

개발 완료 후 각기 다른 브라우저에서 테스트를 진행하고 있었다..

 크롬, 파폭에서는 정상적으로 작동하던 스크립트가 유독 IE랑 Edge에서만!! 말썽이었다ㅠㅠ

해당 기능은 selectBox(셀렉트박스)에 체크 여부에 따라 html태그를 append 시키는 기능으로

체크를 하면 추가가 되고 체크를 해제하면 추가된 항목도 삭제가 되는 식이었다

(예를 들어, onclick에 checked 여부를 보고 append를 걸어놓으면 ie/edge에선 체크가 해제되는게 아니라 두번 들어가게 된다. 물론 조금 빠르게 누르는 경우..)

하지만 이때..

selectBox 더블클릭하면 중복으로 들어가는 현상이 발생한다!!

따라서 구글링 한 결과 onclick대신 onchange를 쓰면 해결된다고 하여 수정했더니 해결...

그런 의미로 onclick과 onchange를 보려고 한다

+ onchange를 쓰기 싫으면 더블클릭(.dblclick();)을 막는 것도 방법...하지만 그냥 onchage로 바꾸자..

---

그리고 또하나 문제가 되는 일이 생겼다..

바로 .html();

이 함수는 html 태그까지 싹 문자열로 가져온다.

"<ul><li>하이</li></ul>" 이런 느낌으로 가져온다고 보면 된다.

하지만 문제가 되는 부분이 바로 .append()와 합쳐서 쓰는 경우다

만약 html(); 이용할 때 위에 처럼 단순한 문자열이면 뭐가 문제냐 싶겠지만

파라미터를 전달해주는 이벤트가 들어가있으면

고통의 시작이다 ㅂㄷㅂㄷ

만약 html();의 값이 아래와 같은 경우라면..

"<ul><li>하이</li><li><input type="text" name="temp" id="temp" onclick="tempFunc('this','params') ></li></ul>"

이런 경우 다른 브라우저에서는 문제가 되지 않지만.. Edge에서는 잘못된 인자라는 값을

콘솔창에 뱉는다.

이런 경우.. 엣지를 포기하던가 (...)

JavaScript로 일일히 문자열로 만들어야 한다.

var addStr = '';

addStr += '<li><input type="text" name="temp" id="temp" onclick="tempFunc('

addStr += "'"+ this + "', '"

addStr += 'params'+"')</li></ul>";

대충 이런 식이다... 혹시나 다른 방법이 있나 열심히 뒤적거렸지만 대략

"엣지가 엣지했다"

(= 엣지에서만 그런다..해결책 따로 없음)

다른 방법이 있다면 좋겠다..저 따옴표의 지옥에서 벗어나고 싶다 ㅠㅜ