Я хочу, чтобы, когда пользователь нажмет на кнопку издавания, эффект slideToggle () он задержался, кнопка издавать позволяет, что контент этикетки был editable, но проблема, - когда пользователь кликает или двойная порция click в этикетку editable, так как он так является эффектом slideToggle () и может беспокоить немного пользователя.
$(document).ready(function () {
$('.titulo_hijo').on('click',function(){
let titulo_hijo = $(this).next();
titulo_hijo.slideToggle();
});
$('.eliminar').on('click', function(){
let eliminar = $(this).parent().parent().parent();
eliminar.remove();
});
$('.editar').on('click', function(){
let editar = $(this).parent().prev();
editar.attr("contentEditable","true");
editar.focus();
});
});
body{
padding: 0;
margin: 0;
}
*{
box-sizing: border-box;
}
.contenedor_item{
display: flex;
flex-direction: column;
width: 100%;
justify-content: center;
align-items: center;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 700;
font-size: 20px;
margin-top: 10px;
}
.titulo_hijo{
width: 95%;
height: 50px;
}
.titulo_hijo{
background: tomato;
margin-bottom: 10px;
}
.hijo{
margin-bottom: 10px;
width: 95%;
display: none;
}
.titulo_hijo, .nieto{
display: flex;
justify-content: space-between;
align-items: center;
border-radius: 5px;
cursor: pointer;
padding: 0 15px;
box-shadow: 0 2px 5px #757575;
}
.nieto{
background: wheat;
width: 100%;
height: 50px;
margin-bottom: 10px;
}
.iconos{
display: flex;
justify-content: center;
align-items: center;
}
.eliminar{
margin-left: 10px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Pregunta</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="index5.js"></script>
<link rel="stylesheet" href="index5.css">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700" rel="stylesheet">
</head>
<body>
<div class="contenedor">
<div class="contenedor_item">
<div class="titulo_hijo"><p>Titulo editable</p><div class="iconos"><img src="https://img.icons8.com/material-sharp/20/000000/pencil.png" class="editar" alt="Editar" title="Editar"><img src="https://img.icons8.com/ios/20/000000/waste-filled.png" class="eliminar" alt="Eliminar" title="Eliminar"></div></div>
<div class="hijo">
<div class="nieto"><p>Titulo editable</p><div class="iconos"><img src="https://img.icons8.com/material-sharp/20/000000/pencil.png" class="editar" alt="Editar" title="Editar"><img src="https://img.icons8.com/ios/20/000000/waste-filled.png" class="eliminar" alt="Eliminar" title="Eliminar"></div></div>
<div class="nieto"><p>Titulo editable</p><div class="iconos"><img src="https://img.icons8.com/material-sharp/20/000000/pencil.png" class="editar" alt="Editar" title="Editar"><img src="https://img.icons8.com/ios/20/000000/waste-filled.png" class="eliminar" alt="Eliminar" title="Eliminar"></div></div>
<div class="nieto"><p>Titulo editable</p><div class="iconos"><img src="https://img.icons8.com/material-sharp/20/000000/pencil.png" class="editar" alt="Editar" title="Editar"><img src="https://img.icons8.com/ios/20/000000/waste-filled.png" class="eliminar" alt="Eliminar" title="Eliminar"></div></div>
</div>
</div>
<div class="contenedor_item">
<div class="titulo_hijo"><p>Titulo editable</p><div class="iconos"><img src="https://img.icons8.com/material-sharp/20/000000/pencil.png" class="editar" alt="Editar" title="Editar"><img src="https://img.icons8.com/ios/20/000000/waste-filled.png" class="eliminar" alt="Eliminar" title="Eliminar"></div></div>
<div class="hijo">
<div class="nieto"><p>Titulo editable</p><div class="iconos"><img src="https://img.icons8.com/material-sharp/20/000000/pencil.png" class="editar" alt="Editar" title="Editar"><img src="https://img.icons8.com/ios/20/000000/waste-filled.png" class="eliminar" alt="Eliminar" title="Eliminar"></div></div>
<div class="nieto"><p>Titulo editable</p><div class="iconos"><img src="https://img.icons8.com/material-sharp/20/000000/pencil.png" class="editar" alt="Editar" title="Editar"><img src="https://img.icons8.com/ios/20/000000/waste-filled.png" class="eliminar" alt="Eliminar" title="Eliminar"></div></div>
<div class="nieto"><p>Titulo editable</p><div class="iconos"><img src="https://img.icons8.com/material-sharp/20/000000/pencil.png" class="editar" alt="Editar" title="Editar"><img src="https://img.icons8.com/ios/20/000000/waste-filled.png" class="eliminar" alt="Eliminar" title="Eliminar"></div></div>
</div>
</div>
<div class="contenedor_item">
<div class="titulo_hijo"><p>Titulo editable</p><div class="iconos"><img src="https://img.icons8.com/material-sharp/20/000000/pencil.png" class="editar" alt="Editar" title="Editar"><img src="https://img.icons8.com/ios/20/000000/waste-filled.png" class="eliminar" alt="Eliminar" title="Eliminar"></div></div>
<div class="hijo">
<div class="nieto"><p>Titulo editable</p><div class="iconos"><img src="https://img.icons8.com/material-sharp/20/000000/pencil.png" class="editar" alt="Editar" title="Editar"><img src="https://img.icons8.com/ios/20/000000/waste-filled.png" class="eliminar" alt="Eliminar" title="Eliminar"></div></div>
<div class="nieto"><p>Titulo editable</p><div class="iconos"><img src="https://img.icons8.com/material-sharp/20/000000/pencil.png" class="editar" alt="Editar" title="Editar"><img src="https://img.icons8.com/ios/20/000000/waste-filled.png" class="eliminar" alt="Eliminar" title="Eliminar"></div></div>
<div class="nieto"><p>Titulo editable</p><div class="iconos"><img src="https://img.icons8.com/material-sharp/20/000000/pencil.png" class="editar" alt="Editar" title="Editar"><img src="https://img.icons8.com/ios/20/000000/waste-filled.png" class="eliminar" alt="Eliminar" title="Eliminar"></div></div>
</div>
</div>
</div>
</body>
</html>
Ты можешь добиваться того, что ты хочешь с event.stopPropagation()
так:
$(document).ready(function () {
$('.titulo_hijo').on('click',function(){
let titulo_hijo = $(this).next();
titulo_hijo.slideToggle();
});
$('.eliminar').on('click', function(){
let eliminar = $(this).parent().parent().parent();
eliminar.remove();
});
$('.editar').on('click', function(e){
e.stopPropagation();
let editar = $(this).parent().prev();
editar.attr("contentEditable","true");
editar.focus();
});
});
body{
padding: 0;
margin: 0;
}
*{
box-sizing: border-box;
}
.contenedor_item{
display: flex;
flex-direction: column;
width: 100%;
justify-content: center;
align-items: center;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 700;
font-size: 20px;
margin-top: 10px;
}
.titulo_hijo{
width: 95%;
height: 50px;
}
.titulo_hijo{
background: tomato;
margin-bottom: 10px;
}
.hijo{
margin-bottom: 10px;
width: 95%;
display: none;
}
.titulo_hijo, .nieto{
display: flex;
justify-content: space-between;
align-items: center;
border-radius: 5px;
cursor: pointer;
padding: 0 15px;
box-shadow: 0 2px 5px #757575;
}
.nieto{
background: wheat;
width: 100%;
height: 50px;
margin-bottom: 10px;
}
.iconos{
display: flex;
justify-content: center;
align-items: center;
}
.eliminar{
margin-left: 10px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Pregunta</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="index5.js"></script>
<link rel="stylesheet" href="index5.css">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700" rel="stylesheet">
</head>
<body>
<div class="contenedor">
<div class="contenedor_item">
<div class="titulo_hijo"><p>Titulo editable</p><div class="iconos"><img src="https://img.icons8.com/material-sharp/20/000000/pencil.png" class="editar" alt="Editar" title="Editar"><img src="https://img.icons8.com/ios/20/000000/waste-filled.png" class="eliminar" alt="Eliminar" title="Eliminar"></div></div>
<div class="hijo">
<div class="nieto"><p>Titulo editable</p><div class="iconos"><img src="https://img.icons8.com/material-sharp/20/000000/pencil.png" class="editar" alt="Editar" title="Editar"><img src="https://img.icons8.com/ios/20/000000/waste-filled.png" class="eliminar" alt="Eliminar" title="Eliminar"></div></div>
<div class="nieto"><p>Titulo editable</p><div class="iconos"><img src="https://img.icons8.com/material-sharp/20/000000/pencil.png" class="editar" alt="Editar" title="Editar"><img src="https://img.icons8.com/ios/20/000000/waste-filled.png" class="eliminar" alt="Eliminar" title="Eliminar"></div></div>
<div class="nieto"><p>Titulo editable</p><div class="iconos"><img src="https://img.icons8.com/material-sharp/20/000000/pencil.png" class="editar" alt="Editar" title="Editar"><img src="https://img.icons8.com/ios/20/000000/waste-filled.png" class="eliminar" alt="Eliminar" title="Eliminar"></div></div>
</div>
</div>
<div class="contenedor_item">
<div class="titulo_hijo"><p>Titulo editable</p><div class="iconos"><img src="https://img.icons8.com/material-sharp/20/000000/pencil.png" class="editar" alt="Editar" title="Editar"><img src="https://img.icons8.com/ios/20/000000/waste-filled.png" class="eliminar" alt="Eliminar" title="Eliminar"></div></div>
<div class="hijo">
<div class="nieto"><p>Titulo editable</p><div class="iconos"><img src="https://img.icons8.com/material-sharp/20/000000/pencil.png" class="editar" alt="Editar" title="Editar"><img src="https://img.icons8.com/ios/20/000000/waste-filled.png" class="eliminar" alt="Eliminar" title="Eliminar"></div></div>
<div class="nieto"><p>Titulo editable</p><div class="iconos"><img src="https://img.icons8.com/material-sharp/20/000000/pencil.png" class="editar" alt="Editar" title="Editar"><img src="https://img.icons8.com/ios/20/000000/waste-filled.png" class="eliminar" alt="Eliminar" title="Eliminar"></div></div>
<div class="nieto"><p>Titulo editable</p><div class="iconos"><img src="https://img.icons8.com/material-sharp/20/000000/pencil.png" class="editar" alt="Editar" title="Editar"><img src="https://img.icons8.com/ios/20/000000/waste-filled.png" class="eliminar" alt="Eliminar" title="Eliminar"></div></div>
</div>
</div>
<div class="contenedor_item">
<div class="titulo_hijo"><p>Titulo editable</p><div class="iconos"><img src="https://img.icons8.com/material-sharp/20/000000/pencil.png" class="editar" alt="Editar" title="Editar"><img src="https://img.icons8.com/ios/20/000000/waste-filled.png" class="eliminar" alt="Eliminar" title="Eliminar"></div></div>
<div class="hijo">
<div class="nieto"><p>Titulo editable</p><div class="iconos"><img src="https://img.icons8.com/material-sharp/20/000000/pencil.png" class="editar" alt="Editar" title="Editar"><img src="https://img.icons8.com/ios/20/000000/waste-filled.png" class="eliminar" alt="Eliminar" title="Eliminar"></div></div>
<div class="nieto"><p>Titulo editable</p><div class="iconos"><img src="https://img.icons8.com/material-sharp/20/000000/pencil.png" class="editar" alt="Editar" title="Editar"><img src="https://img.icons8.com/ios/20/000000/waste-filled.png" class="eliminar" alt="Eliminar" title="Eliminar"></div></div>
<div class="nieto"><p>Titulo editable</p><div class="iconos"><img src="https://img.icons8.com/material-sharp/20/000000/pencil.png" class="editar" alt="Editar" title="Editar"><img src="https://img.icons8.com/ios/20/000000/waste-filled.png" class="eliminar" alt="Eliminar" title="Eliminar"></div></div>
</div>
</div>
</div>
</body>
</html>