click(), focusin() 이벤트 충돌 : blur, focusout 처리전에 click이벤트 발생시키기 > 자료실

자료실

자료실

click(), focusin() 이벤트 충돌 : blur, focusout 처리전에 click이벤트 발생시키기

페이지 정보

profile_image
작성자 최고관리자
댓글 0 조회 347회 작성일 23-06-17 21:07
작성일 23-06-17 21:07

본문

click이벤트 대신에 mousedown 이벤트 사용


조건은 아래와 같다.

1. 입력하고자 하는 input에 focus를 잃는 경우(blur 발생) 버튼을 사라지게 하는 이벤트를 추가

2. 입력하는 input에 focus를 얻은 상태에서 입력중이면 버튼이 활성화

3. 활성화된 버튼을 클릭하면 input의 데이터가 다 지워짐


문제는 click보다 blur가 더 빨리 동작한다는 것이다.
 

$('.inp_box').on("mousedown", ".inp_remove_btn", function(){ //click 사용안됨 //blur가 더 빨리 동작함

    $(this).siblings("input").val("");


}).on("change keyup input", "input", function(e){ //입력이 시작되면 삭제버튼 활성화

    $(this).siblings(".inp_remove_btn").addClass("active");


}).on("blur", "input", function(e){ //input focus를 잃으면 삭제버튼 비활성화

    $(this).siblings(".inp_remove_btn").removeClass("active");


}).on("focus", "input", function(e){ //input focus를 얻으면 길이 체크하여 삭제버튼 활성화 유무체크

    if($(this).val().length > 0){

        $(this).siblings(".inp_remove_btn").addClass("active");

    }

});


 

var cma_bbs_options_btn_more_opt_state = cmaMobileCheck ? 'click' : 'mousedown'; // click(), focusin() 이벤트 충돌때문에 pc에서는 click 대신에 mousedown

$(function(e){

	// view 관리 옵션창 열기

	$(document).on(cma_bbs_options_btn_more_opt_state, '.btn_more_opt.is_view_btn', function(e) {

		e.stopPropagation();

		cma_bbs_options_btn_more_opt_state = 'click is_view_btn';

		$('.more_opt.is_view_readme_btn').hide();

		$('.more_opt.is_view_btn').toggle();

		cmaConsoleView(cma_bbs_options_btn_more_opt_state+' : .btn_more_opt.is_view_btn', ''); // console log (log, sType) sType : 공백은 관리자만 , all 전체 , super : is_admin   => /cma_js/cma.common.js

		return false;

	});


	// view 관리 옵션창 focus로 열기

	$(document).on('focusin', '.btn_more_opt.is_view_btn', function(e) {

		e.stopPropagation();

		$('.more_opt.is_view_readme_btn').hide();

		$('.more_opt.is_view_btn').toggle();

		cmaConsoleView('focusin : .btn_more_opt.is_view_btn', ''); // console log (log, sType) sType : 공백은 관리자만 , all 전체 , super : is_admin   => /cma_js/cma.common.js

	});

});
추천 0 비추천 0

  • 회사 :
  • 대표 :
  • 주소 :
  • 메일 : admin@mysample.com
  • 사업자 등록번호 :
Copyright © cginjs.com All rights reserved.
notice